How To use Tailwindcss in React

Tailwindcss is a CSS library that allows you to Rapidly build modern websites without ever leaving your HTML. After many attempts with create-react-app, I gave up. I thought this wonderful wasn't for me.

Of recent, I have switched from using create-react-app to yarn create react-app. In this article, I want to share what I did and finally got Tailwindcss to work in React. Hope it saves you time.

Notice that with this setup we don't use craco like most content online recommend. I think those are outdated. But I will update this post in case I find out more.

```
$yarn create react-app <project-name>
```
```
$cd <project-name>
```

$yarn add tailwindcss postcss autoprefixer -D

```
$npx tailwindcss init
```
Edit tailwindcss.config.js file and set the content key to the following below.
```
content : [
 "./src/**/*.{js,jsx,ts,tsx}",
]
```
Add below to the top of the index.css if you changed from index.css to another file of your choice, add the code below to that particular file. This file should be imported into your root component.

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

It's time to proceed with coding now. Run the command below to start the node server so that you can preview your React App.

```
yarn start
```

Now to use Tailwindcss in case you are totally new to it, there is no better place than the documentation. Click here to visit the Documentation page and scroll up to the layout section.

Enjoy!