DEV Community

Cover image for Set Up Tailwind Css With create-react-app and yarn
Ashirbad Panigrahi
Ashirbad Panigrahi

Posted on

Set Up Tailwind Css With create-react-app and yarn

Create a new react project with yarn

yarn create react-app react-tailwind-css-stater
Enter fullscreen mode Exit fullscreen mode

Install Tailwind CSS with postcss & autoprefixer

yarn add -D tailwindcss postcss autoprefixer
Enter fullscreen mode Exit fullscreen mode

Generate tailwind.config.js and postcss.config.js

yarn tailwindcss init -p
Enter fullscreen mode Exit fullscreen mode

Modify tailwind.config.js file

module.exports = {
  content: ["./src/**/*.{js,jsx,ts,tsx}"],
  theme: {
    extend: {},
  },
  plugins: [],
};
Enter fullscreen mode Exit fullscreen mode

Add tailwind base, components and utilities to index.css

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

GitHub Repo

Top comments (10)

Collapse
 
pfedprog profile image
Pavel Fedotov

cheers

Collapse
 
ashirbadgudu profile image
Ashirbad Panigrahi

🤠

Collapse
 
talhaabu1 profile image
Abu Talha

nice good bro help

Collapse
 
khaliidoh profile image
Khaliid-oh

I followed the whole process and my app is running fine and no errors but tailwind css still isn't working for me

Collapse
 
ashirbadgudu profile image
Ashirbad Panigrahi

Share your git url so may be I can help

Collapse
 
talhaabu1 profile image
Abu Talha
_Nice bro
_```

Enter fullscreen mode Exit fullscreen mode
Collapse
 
harixom profile image
Hari Om Singh

thanks man it help me a lot

Collapse
 
ashirbadgudu profile image
Ashirbad Panigrahi

I'm glad to hear it

Collapse
 
tusar78 profile image
Tusar

Thanks bro.

Collapse
 
pengmouse profile image
Afolabi Babatunde

Well done, cheers!