DEV Community

Sirima Insorn
Sirima Insorn

Posted on

Setting up TailwindCSS in React App project.

Getting Started

First, create a React project with create-react-app:

npx create-react-app react-tailwindcss
Enter fullscreen mode Exit fullscreen mode

if Create React App version < 5.0:

npx create-react-app@latest react-tailwindcss
Enter fullscreen mode Exit fullscreen mode

or

npx create-react-app@5.0.0 react-tailwindcss
Enter fullscreen mode Exit fullscreen mode

Install TailwindCSS

Install the dependencies required for Tailwind CSS:

npm install -D tailwindcss postcss autoprefixer
Enter fullscreen mode Exit fullscreen mode

Next, generate your config tailwind.config.js file for your project using the Tailwind CLI utility included when you install the tailwindcss npm package:

npx tailwindcss init
Enter fullscreen mode Exit fullscreen mode

It will have the following content:

module.exports = {
  content: [],
  theme: {
    extend: {},
  },
  plugins: [],
}
Enter fullscreen mode Exit fullscreen mode

Use the -p flag if you’d like to also generate a basic postcss.config.js file alongside your tailwind.config.js file:

npx tailwindcss init -p
Enter fullscreen mode Exit fullscreen mode

This will generate a postcss.config.js file in your project that looks like this:

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}
Enter fullscreen mode Exit fullscreen mode

First, we’ll change the content key in tailwind.config.js:

content: ["./src/**/*.{js,jsx,ts,tsx}"],
Enter fullscreen mode Exit fullscreen mode

Include Tailwind in your CSS

Use the @tailwind directive to include Tailwind’s base, components, and utilities styles, replacing the original file contents:

@tailwind base;
@tailwind components;
@tailwind utilities
Enter fullscreen mode Exit fullscreen mode

Let’s start the server now. Run the following command:

npm start
Enter fullscreen mode Exit fullscreen mode

Image description

You can view a demo of the website we’re creating here

Top comments (0)