Tailwind Integration Starter

This is a starter project for integrating Tailwind CSS with PostCSS, allowing you to use custom variables and other PostCSS features in your Tailwind CSS setup.

Getting Started

Prerequisites

• Node.js and npm installed on your machine.

Installation

1. Clone the repository:

   git clone https://github.com/fless-lab/tailwind-integration-starter.git
   cd tailwind-integration-starter
   

2. Install dependencies:

   npm install
   

Project Structure

tailwind-integration-starter/
├── src/
│   ├── styles.css
│   └── index.html
├── dist/
│   └── styles.css (generated)
├── tailwind.config.js
├── postcss.config.js
└── package.json

• src/styles.css: This is where you import Tailwind CSS and add your custom styles.
• src/index.html: A sample HTML file to demonstrate the usage of Tailwind CSS.
• dist/styles.css: The output CSS file generated by PostCSS.

Usage

Building CSS

To build the CSS file with Tailwind and PostCSS:

npm run build:css

Watching for Changes

To automatically rebuild the CSS file when you make changes:

npm run watch:css

Customization

• Tailwind Config (tailwind.config.js): You can customize your Tailwind setup, such as extending the theme, adding plugins, etc.
• PostCSS Config (postcss.config.js): Configure PostCSS plugins as needed.

Adding Custom Styles

Add your custom styles in src/styles.css. You can use Tailwind's utilities or write your own CSS.

License

This project is licensed under the MIT License.