Install Tailwind CSS with Create React App - Tailwind CSS

1. Create your project

   npx create-react-app my-project
   cd my-project
   

2. Install Tailwind CSS

   npm install -D tailwindcss
   npx tailwindcss init
   

3. Configure your template paths in tailwind.config.js File

   /** @type {import('tailwindcss').Config} */
   module.exports = {
     content: [
       "./src/**/*.{js,jsx,ts,tsx}",
     ],
     theme: {
       extend: {},
     },
     plugins: [],
   }
   

4. Add the Tailwind directives to your CSS to index.css file

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

5. Start your build process

   npm run start
   

6. Start using Tailwind in your project in App.jsx

   export default function App() {
     return (
       <h1 className="text-3xl text-blue-900 font-bold underline ">
         Hello world!
       </h1>
     )
   }
   

Last Updated : January 27, 2024