Tailwind CSS 4
Tailwind CSS guide for Trezo.
Overview
Tailwind CSS v4.0 is a utility-first CSS framework that revolutionizes web development with a focus on performance, flexibility, and modern web standards. Released on January 22, 2025, it introduces a high-performance Oxide engine, achieving up to 5x faster full builds and over 100x faster incremental builds, measured in microseconds.
With a simplified setup requiring just a single line of CSS (@import "tailwindcss"), zero configuration, and automatic content detection, it minimizes boilerplate and dependencies. Built for the modern web, Tailwind v4.0 leverages cutting-edge CSS features like cascade layers, registered custom properties with @property, color-mix(), container queries, and 3D transforms.
It offers a refreshed wide-gamut color palette, enhanced utilities for gradients, shadows, and more, alongside a first-party Vite plugin for seamless integration. This ground-up rewrite eliminates the traditional config file, using CSS-first configuration for theming, making it ideal for developers seeking rapid, customizable, and maintainable UI development.
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 assets/scss/style.scss file.
@import url("https://fonts.googleapis.com/css2?family=Inter:[email protected]&display=swap");
@theme {
--font-body: "Inter", serif;
}
Option to Change the Main Color
assets/scss/style.scss
@theme {
--color-white: #ffffff;
--color-black: #3A4252;
--color-dark: #000000;
--color-primary-50: #ECF0FF;
--color-primary-100: #DDE4FF;
--color-primary-200: #C2CDFF;
--color-primary-300: #9CAAFF;
--color-primary-400: #757DFF;
--color-primary-500: #605DFF;
--color-primary-600: #4936F5;
--color-primary-700: #3E2AD8;
--color-primary-800: #3225AE;
--color-primary-900: #2D2689;
--color-secondary-50: #EEF6FF;
--color-secondary-100: #DAEBFF;
--color-secondary-200: #BDDCFF;
--color-secondary-300: #90C7FF;
--color-secondary-400: #5DA8FF;
--color-secondary-500: #3584FC;
--color-secondary-600: #1F64F1;
--color-secondary-700: #174EDE;
--color-secondary-800: #1940B4;
--color-secondary-900: #1A3A8E;
--color-purple-50: #FAF5FF;
--color-purple-100: #F3E8FF;
--color-purple-200: #E9D5FF;
--color-purple-300: #D7B5FD;
--color-purple-400: #BF85FB;
--color-purple-500: #AD63F6;
--color-purple-600: #9135E8;
--color-purple-700: #7C24CC;
--color-purple-800: #6A22A7;
--color-purple-900: #571D86;
--color-success-50: #eeffe5;
--color-success-100: #d8ffc8;
--color-success-200: #b2ff97;
--color-success-300: #82fc5a;
--color-success-400: #58f229;
--color-success-500: #37d80a;
--color-success-600: #25b003;
--color-success-700: #1e8308;
--color-success-800: #1d670d;
--color-success-900: #1a5710;
--color-orange-50: #fff5ed;
--color-orange-100: #ffe8d4;
--color-orange-200: #ffcea9;
--color-orange-300: #ffaa72;
--color-orange-400: #fe7a36;
--color-orange-500: #fd5812;
--color-orange-600: #ee3e08;
--color-orange-700: #c52b09;
--color-orange-800: #9c2410;
--color-orange-900: #7e2010;
--color-danger-50: #fff2f0;
--color-danger-100: #ffe1dd;
--color-danger-200: #ffc8c0;
--color-danger-300: #ffa294;
--color-danger-400: #ff6d57;
--color-danger-500: #FF4023;
--color-danger-600: #ec1f00;
--color-danger-700: #d71c00;
--color-danger-800: #b11a03;
--color-danger-900: #921c0a;
--color-gray-50: #f6f7f9;
--color-gray-100: #eceef2;
--color-gray-200: #d5d9e2;
--color-gray-300: #b1bbc8;
--color-gray-400: #8695aa;
--color-gray-500: #64748b;
--color-gray-600: #526077;
--color-gray-700: #434e61;
--color-gray-800: #3a4252;
--color-gray-900: #23272e;
--color-warning-50: #fff8e1;
--color-warning-100: #ffecb3;
--color-warning-200: #ffe082;
--color-warning-300: #ffd54f;
--color-warning-400: #ffca28;
--color-warning-500: #ffc107;
--color-warning-600: #ffb300;
--color-warning-700: #ffa000;
--color-warning-800: #ff8f00;
--color-warning-900: #ff6f00;
--color-info-50: #e1f7fe;
--color-info-100: #b3ecfc;
--color-info-200: #80e0fa;
--color-info-300: #48d3f5;
--color-info-400: #0dcaf0;
--color-info-500: #00c1eb;
--color-info-600: #00b1d7;
--color-info-700: #009cbb;
--color-info-800: #0088a2;
--color-info-900: #006574;
--shadow-3xl: rgba(149, 157, 165, 0.2) 0px 8px 24px;
}
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/…’
Please minify all CSS files located at the path: assets/css/.
Please minify all JS files located at the path: assets/js/.
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