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.

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.

Ensure you have the following installed:

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

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

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.

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

• Tailwind CSS Documentation
• Vite Documentation

This project is licensed under the MIT License.

Copyright 2025, Max Base