tailwind-vite

Automate Tailwind CSS Setup in Your Vite Projects

Overview

tailwind-vite is a simple command-line tool designed to streamline the integration of Tailwind CSS v3 into your Vite projects. Forget the manual setup steps; this package handles the installation and configuration of necessary dependencies and files with a single command.

Features

• Automated Installation: Installs tailwindcss@3, postcss, and autoprefixer as development dependencies.
• Config Generation: Runs npx tailwindcss init -p to create tailwind.config.js and postcss.config.js.
• Path Configuration: Automatically configures tailwind.config.js to include standard template paths (./index.html, ./src/**/*.{js,ts,jsx,tsx}).
• CSS Directives: Adds the essential @tailwind directives (base, components, utilities) to your ./src/index.css file, creating it if it doesn't exist.

Installation

You can install tailwind-vite either globally (recommended for convenience) or as a development dependency in your project.

Global Installation

npm install -g tailwind-vite
# or
yarn global add tailwind-vite

Local Installation

npm install -D tailwind-vite
# or
yarn add -D tailwind-vite

Usage

After installation, you can run the command in your terminal:

tailwind-vite

What It Does

1. Installs Dependencies: Adds tailwindcss@3, postcss, and autoprefixer to your project.
2. Generates Config Files: Creates tailwind.config.js and postcss.config.js in your project root.
3. Configures Tailwind: Sets up the content paths in tailwind.config.js to include your HTML and JavaScript files.
4. Creates CSS File: Generates ./src/index.css with the necessary Tailwind directives if it doesn't already exist.

License

This project is licensed under the MIT License - see the LICENSE file for details.

Author

Abhay Patel - GitHub Profile