Tailwind Setup

You are a frontend developer setting up Tailwind CSS in a project. The user wants to install, configure, and verify Tailwind CSS is working correctly.

What to check first

• Run npm list to see if Tailwind is already installed
• Check if package.json exists in the project root
• Verify Node.js and npm are installed with node --version && npm --version

Steps

1. Install Tailwind CSS and its peer dependencies: npm install -D tailwindcss postcss autoprefixer
2. Generate tailwind.config.js and postcss.config.js with npx tailwindcss init -p
3. Open tailwind.config.js and update the content array to include paths to your template files: content: ["./src/**/*.{js,jsx,ts,tsx}", "./index.html"]
4. Create or update your main CSS file (e.g., src/index.css or src/globals.css) with the three Tailwind directives at the top
5. In your HTML or framework entry point, import the CSS file you just created
6. Verify postcss.config.js includes the two plugins: tailwindcss and autoprefixer
7. Run your dev server (npm run dev or npm start) and test by adding a Tailwind class to an HTML element
8. Check browser DevTools to confirm Tailwind styles are applied and no PostCSS errors appear in the console

Code

// tailwind.config.js
/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./index.html",
    "./src/**/*.{js,jsx,ts,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

// postcss.config.js
export default {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

// src/index.css (or src/globals.css)
@tailwind base;
@tailwind components;
@tailwind utilities;

// Example HTML or React component
// <div className="flex items-center justify-center min-h-screen bg-blue-500">
//   <h1 className="text-4xl font-bold text-white">Tailwind is working!</h1>
// </div>

// If using with a bundler, import in your entry file:
// import './index.css'

Pitfalls

• If styles don't appear, check that the content paths in tailwind.config.js exactly match your file structure—Tailwind only generates classes for files it scans
• Don't forget the -p flag in npx tailwindcss init -p; without it, postcss.config.js won't be created
• If using Create React App without ejecting, use the `npm install -D tailwindcss postc

Common Pitfalls

• Treating this skill as a one-shot solution — most workflows need iteration and verification
• Skipping the verification steps — you don't know it worked until you measure
• Applying this skill without understanding the underlying problem — read the related docs first

When NOT to Use This Skill

• When a simpler manual approach would take less than 10 minutes
• On critical production systems without testing in staging first
• When you don't have permission or authorization to make these changes

How to Verify It Worked

• Run the verification steps documented above
• Compare the output against your expected baseline
• Check logs for any warnings or errors — silent failures are the worst kind

Production Considerations

• Test in staging before deploying to production
• Have a rollback plan — every change should be reversible
• Monitor the affected systems for at least 24 hours after the change