Tailwind CSS

Tailwind CSS guide for Trezo.

Overview

Welcome to the Trezo Tailwind CSS guide. Here, you'll find all the information you need to get started.

Tailwind CSS is a modern utility-first CSS framework designed to streamline front-end development by providing a vast library of low-level, customizable utility classes. Unlike traditional CSS frameworks that come with predefined components, Tailwind offers a more flexible approach, allowing developers to style elements directly in HTML. Each utility class in Tailwind serves a single purpose, such as setting colors, padding, margins, shadows, and typography, enabling fast prototyping and consistent, responsive designs.

With a focus on efficiency and ease of customization, Tailwind encourages developers to create unique interfaces without writing extensive custom CSS. Its utility-based approach minimizes CSS bloat, while configuration options and plugins allow seamless theming, dark mode support, and integration with other tools like PostCSS or PurgeCSS for optimal performance in production.

Tailwind CSS is perfect for building modern, responsive websites with minimal styling overhead and full design control right in your markup.

Files and Folders

The structure of the files and folders is as follows:

  • src/assets/css — Contains the CSS files.
  • src/assets/fonts — Contains the font files.
  • src/assets/images — Contains the image files.
  • src/assets/js — Contains the JavaScript files.
  • src/assets/scss — Contains the SCSS files.

Upload the template files to the server using an FTP client like FileZilla.

Editing and Uploading Files

Here’s a revised version of your text:

Individual pages can be customized by opening them in a code editor like VS Code. After completing all customizations, upload the updated project files to your hosting server to make the website live on your domain. You can use an FTP client, such as FileZilla, to transfer the files.

HEAD CSS Structure

The following CSS files are loaded inside the head section:

<!-- Links Of CSS File -->
<link rel="stylesheet" href="assets/css/remixicon.css" />
<link rel="stylesheet" href="assets/css/apexcharts.css" />
<link rel="stylesheet" href="assets/css/simplebar.css" />
<link rel="stylesheet" href="assets/css/jsvectormap.min.css" />
<link rel="stylesheet" href="assets/css/swiper-bundle.min.css" />
<link rel="stylesheet" href="assets/css/quill.snow.css" />
<link rel="stylesheet" href="assets/css/style.css" />

Javascript Structure

The following JS files are loaded before the closing HEAD or BODY section:

<!-- Links Of JS File -->
<script src="assets/js/apexcharts.min.js"></script>
<script src="assets/js/fslightbox.js"></script>
<script src="assets/js/simplebar.min.js"></script>
<script src="assets/js/swiper-bundle.min.js"></script>
<script src="assets/js/fullcalendar.min.js"></script>
<script src="assets/js/jsvectormap.min.js"></script>
<script src="assets/js/world-merc.js"></script>
<script src="assets/js/quill.min.js"></script>
<script src="assets/js/custom.js"></script>

Would you like real demo images?

Due to Envato’s policy, demo images cannot be included in the download bundle. To request demo images, please submit a ticket through the provided link via our Dedicated Support System.

HTML Structure

Trezo is a responsive template built on the Tailwind CSS. For more information, please refer to the Tailwind CSS documentation.

The template structure is consistent across all pages, with each section organized under a specific section ID. Below is the general structure:

<div
	class="trezo-card bg-primary-500 mb-[25px] p-[20px] md:p-[25px] rounded-md"
>
	<div
		class="trezo-card-content relative ltr:md:pr-[230px] rtl:md:pl-[230px]"
	>
		<div class="md:pt-[5px] md:pb-[5px]">
			<h5 class="mb-[5px] md:mb-[2px] font-semibold text-white">
				Good Morning, <span class="text-[#ffcea9]">Olivia!</span>
			</h5>
			<p class="text-[#d5d9e2]">
				Here's what's happening with your store today.
			</p>
			<div
				class="border-t border-primary-400 mt-[15px] mb-[15px] md:mt-[30px] md:mb-[33px]"
			></div>
			<div class="sm:flex items-center">
				<div
					class="flex items-center ltr:sm:mr-[20px] ltr:2xl:mr-[40px] rtl:sm:ml-[20px] rtl:2xl:ml-[40px]"
				>
					<div
						class="w-[42px] h-[42px] rtl:ml-[12px] ltr:mr-[12px] bg-primary-50 text-primary-500 rounded-md flex items-center justify-center"
					>
						<i class="material-symbols-outlined"> shopping_bag </i>
					</div>
					<div>
						<span
							class="text-[15px] md:text-md text-white block font-semibold mb-[1px] md:mb-0"
						>
							86 New orders
						</span>
						<span class="block text-gray-200">
							Awaiting processing
						</span>
					</div>
				</div>
				<div class="flex items-center mt-[15px] sm:mt-0">
					<div
						class="w-[42px] h-[42px] rtl:ml-[12px] ltr:mr-[12px] bg-danger-50 text-danger-500 rounded-md flex items-center justify-center"
					>
						<i class="material-symbols-outlined"> chat_error </i>
					</div>
					<div>
						<span
							class="text-[15px] md:text-md text-white block font-semibold mb-[1px] md:mb-0"
						>
							35 Products
						</span>
						<span class="block text-gray-200"> Out of stock </span>
					</div>
				</div>
			</div>
		</div>
		<div
			class="text-center md:absolute ltr:right-0 rtl:left-0 md:max-w-[208.04px] md:top-1/2 md:-translate-y-1/2 mt-[20px] md:mt-0"
		>
			<img
				src="assets/images/welcome.png"
				class="inline-block"
				alt="welcome-image"
			/>
		</div>
	</div>
</div>

Fonts Used

By default, the template loads the Inter font from Google Web Fonts. However, the font can be changed to suit the needs of your website.

The font configuration can be found in the tailwind.config.js file.

@import url("https://fonts.googleapis.com/css2?family=Inter:[email protected]&display=swap");

fontfamily: {
	body: [ "Inter", "system-ui", "sans-serif"];
}

Option to Change the Main Color

tailwind.config.js

colors: {
	primary: {
		50: '#ECF0FF',
		100: '#DDE4FF',
		200: '#C2CDFF',
		300: '#9CAAFF',
		400: '#757DFF',
		500: '#605DFF',
		600: '#4936F5',
		700: '#3E2AD8',
		800: '#3225AE',
		900: '#2D2689'
	},
	secondary: {
		50: '#EEF6FF',
		100: '#DAEBFF',
		200: '#BDDCFF',
		300: '#90C7FF',
		400: '#5DA8FF',
		500: '#3584FC',
		600: '#1F64F1',
		700: '#174EDE',
		800: '#1940B4',
		900: '#1A3A8E'
	},
	purple: {
		50: '#FAF5FF',
		100: '#F3E8FF',
		200: '#E9D5FF',
		300: '#D7B5FD',
		400: '#BF85FB',
		500: '#AD63F6',
		600: '#9135E8',
		700: '#7C24CC',
		800: '#6A22A7',
		900: '#571D86'
	},
	success: {
		50: '#eeffe5',
		100: '#d8ffc8',
		200: '#b2ff97',
		300: '#82fc5a',
		400: '#58f229',
		500: '#37d80a',
		600: '#25b003',
		700: '#1e8308',
		800: '#1d670d',
		900: '#1a5710'
	},
	orange: {
		50: '#fff5ed',
		100: '#ffe8d4',
		200: '#ffcea9',
		300: '#ffaa72',
		400: '#fe7a36',
		500: '#fd5812',
		600: '#ee3e08',
		700: '#c52b09',
		800: '#9c2410',
		900: '#7e2010'
	},
	danger: {
		50: '#fff2f0',
		100: '#ffe1dd',
		200: '#ffc8c0',
		300: '#ffa294',
		400: '#ff6d57',
		500: '#FF4023',
		600: '#ec1f00',
		700: '#d71c00',
		800: '#b11a03',
		900: '#921c0a'
	},
	gray: {
		50: '#f6f7f9',
		100: '#eceef2',
		200: '#d5d9e2',
		300: '#b1bbc8',
		400: '#8695aa',
		500: '#64748b',
		600: '#526077',
		700: '#434e61',
		800: '#3a4252',
		900: '#23272e'
	},
	warning: {
		50: '#fff8e1',
		100: '#ffecb3',
		200: '#ffe082',
		300: '#ffd54f',
		400: '#ffca28',
		500: '#ffc107',
		600: '#ffb300',
		700: '#ffa000',
		800: '#ff8f00',
		900: '#ff6f00'
	},
	info: {
		50: '#e1f7fe',
		100: '#b3ecfc',
		200: '#80e0fa',
		300: '#48d3f5',
		400: '#0dcaf0',
		500: '#00c1eb',
		600: '#00b1d7',
		700: '#009cbb',
		800: '#0088a2',
		900: '#006574'
	},
	white: '#ffffff',
	black: '#3A4252',
	dark: '#000000'
},

For RTL Only

If you wish to use RTL, please apply the code below.

<html lang="zxx" dir="rtl"></html>

How to Run The Project

Please open the file in Visual Studio Code editor. And Open the terminal:

npm install

# Watch your custom Sass for changes and compile it to CSS
npx tailwindcss -i ./src/assets/scss/style.scss -o ./src/assets/css/style.css --watch

Speed Optimization

Please optimize all images to reduce their file size (in KB or MB) and ensure they match the size of the placeholder image located at ‘path: src/assets/images/…’

Tinypng

Please minify all CSS files located at the path: assets/css/.

CSS Minifier

Please minify all JS files located at the path: assets/js/.

Javascript Minifier

How to Change an Image?

Please navigate to the image file at 'path: src/assets/images/...' and replace it with your desired image, ensuring it matches the placeholder image's size and name.

Installation Video

To help you understand the installation process better, please watch the following video tutorial. It provides a step-by-step guide on setting up the application:

Additional Notes

If you need more details, please refer to the written instructions.

Feel free to reach out to our support team