Create React Project with Tailwind

Posted on Edited on In
Procedure of creating a tailwind react project

Create a react project with tailwind

  • Create project using create-react-app.

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

  • Install Tailwind CSS and its dependencies. Create tailwind.config.js and postcss.config.js

    1
    2
    npm install -D tailwindcss postcss autoprefixer
    npx tailwindcss init -p

  • Configure tailwind.config.js

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    /** @type {import('tailwindcss').Config} */
    module.exports = {
      content: [
        "./src/**/*.{js,jsx,ts,tsx}",
      ],
      theme: {
        extend: {},
      },
      plugins: [],
    }

  • Add the Tailwind directives to React css file (./src/index.css)

    1
    2
    3
    @tailwind base;
    @tailwind components;
    @tailwind utilities;

  • Start React Project

    1
    npm run start

  • Modify App.js

    1
    2
    3
    4
    5
    6
    7
    export default function App() {
      return (
        <h1 className="text-3xl font-bold underline">
          Hello world!
        </h1>
      )
    }

  • Check whether the className work.