Tailwind CSS Setup Example

This repository provides a minimal setup for integrating Tailwind CSS version 4 into a static HTML project, utilizing Vite for development and build processes. It serves as a foundational template for developers looking to implement Tailwind CSS with custom configurations and modern tooling.

🚀 Project Overview

This project demonstrates how to:

• Set up Tailwind CSS v4 with Vite.
• Customize the Tailwind configuration to include custom colors.
• Build and serve the project locally using PHP's built-in server.

🛠️ Prerequisites

Ensure you have the following installed:

• Node.js (v16 or higher recommended)
• npm
• PHP (for local server)

📁 Project Structure

tailwindcss-setup/
├── dist/ # Compiled output (HTML, CSS, JS)
├── index.html # Main HTML page
├── test.html # Secondary HTML page
├── tailwind.config.js # Tailwind CSS configuration
├── tailwind.css # Custom CSS file
├── main.js # JavaScript entry point
└── package.json # Project metadata and dependencies

⚙️ Installation & Setup

1. Clone the repository:

   git clone https://github.com/BaseMax/tailwindcss-setup.git
   cd tailwindcss-setup

2. Install dependencies:

   npm install

3. Initialize Tailwind CSS:

   npx tailwindcss init -p

4. Configure Tailwind:

   Update tailwind.config.js to include custom colors:

   /** @type {import('tailwindcss').Config} */module.exports={content: ['./*.html','./*.js'],theme: {extend: {colors: {'table-header': '#091a52','highlight': '#ff5733',},},},safelist: ['bg-table-header','text-highlight'],plugins: [],};

5. Create your CSS file:

   In tailwind.css, include the Tailwind directives:

   @tailwind base;
   @tailwind components;
   @tailwind utilities;
   @theme {
   --color-table-header:#091a52;
   --color-highlight:#ff5733;
   }

6. Build the project:

   npm run build

7. Serve the project locally:

   php -S localhost:4646 -t dist

   Visit http://localhost:4646 in your browser to view the project.

📄 Example Pages

• index.html: The main landing page showcasing custom Tailwind styles.
• test.html: A secondary page for testing purposes.

📚 Resources

• Tailwind CSS Documentation
• Vite Documentation

📄 License

This project is licensed under the MIT License.

Copyright 2025, Max Base