Talwinder 🎨

A simple CLI tool to quickly set up the latest version of Tailwind CSS in your React + Vite projects.

Usage

Simply run this command in your React + Vite project directory:

npx talwinder

That's it! The tool will automatically:

• ✅ Detect your package manager (npm, yarn, pnpm, or bun)
• ✅ Install the latest versions of tailwindcss, postcss, and autoprefixer
• ✅ Create tailwind.config.js and postcss.config.js
• ✅ Configure Tailwind with proper Vite + React paths
• ✅ Add Tailwind directives to your index.css file

Features

• 🚀 Quick Setup: One command to get Tailwind CSS running
• 📦 Smart Package Manager Detection: Automatically uses your project's package manager
• 🎯 Vite Optimized: Configures paths for React + Vite projects
• 🔍 Intelligent CSS Detection: Finds and updates your CSS file automatically
• ✨ Latest Versions: Always installs the newest Tailwind CSS version

Requirements

• Node.js 14.0.0 or higher
• An existing React + Vite project

What Gets Installed

• tailwindcss@latest
• postcss@latest
• autoprefixer@latest

Configuration

The tool creates a tailwind.config.js file with paths configured for Vite + React:

export default {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

And adds these directives to your index.css:

@tailwind base;
@tailwind components;
@tailwind utilities;

After Installation

1. Make sure your index.css file is imported in your main.jsx or main.tsx file
2. Start using Tailwind utility classes in your components
3. Run your development server

Example

# Create a new Vite + React app
npm create vite@latest my-app -- --template react
cd my-app

# Set up Tailwind CSS
npx talwinder

# Start developing
npm run dev

License

MIT

Contributing

Contributions are welcome! Feel free to open issues or submit pull requests.