Using Tailwind with React and Vue

1. Setting Up Tailwind in React (Vite or CRA)

// Install dependencies
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

// tailwind.config.js
content: [
  "./src/**/*.{js,jsx,ts,tsx}",
],

// index.css
@tailwind base;
@tailwind components;
@tailwind utilities;
            

Then import index.css in your main.jsx or App.jsx.

2. React Component Example

function Card() {
  return (
    <div className="bg-white rounded shadow p-4">
      <h2 className="text-xl font-bold">Tailwind + React</h2>
      <p className="text-gray-600">Utility-first styling is awesome!</p>
    </div>
  );
}
            

3. Setting Up Tailwind in Vue (Vite or Vue CLI)

// Install dependencies
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

// tailwind.config.js
content: [
  "./index.html",
  "./src/**/*.{vue,js,ts,jsx,tsx}",
],

// src/assets/tailwind.css
@tailwind base;
@tailwind components;
@tailwind utilities;
            

Import the CSS file in main.js:

import './assets/tailwind.css';
            

4. Vue Component Example

<template>
  <div class="bg-white rounded shadow p-4">
    <h2 class="text-xl font-bold">Tailwind + Vue</h2>
    <p class="text-gray-600">Works beautifully in Vue too!</p>
  </div>
</template>
            

5. Tips and Best Practices

• Use component-based design with utility-first styles.
• Leverage Tailwind’s responsive and dark mode classes.
• Use @apply inside .module.css for advanced reuse.
• Enable IDE IntelliSense for Tailwind class suggestions.

Conclusion

Whether you use React or Vue, Tailwind provides a modern way to style UI with flexibility and maintainability. It reduces the need for custom CSS and works well with component-driven development.