ReactJS with Tailwind CSS
Tags: css, todayilearned
Published: 2020-04-20 13:08:11

##Introduction

This post is about configuring Tailwind css with React Js. 

We will start with the setup process. It will be smooth if we follow along as always :P

###setup
We will use create-react-app for bootstrapping our application
```javascript
npx create-react-app my-react-tailwind-project
```

####Install Tailwind via npm
Below command will add tailwind as devdependency for our project.
```javascript
npm install tailwindcss --save-dev
```
###Create your Tailwind config file
If you'd like to customize your Tailwind installation, you can generate a config file for your project using the Tailwind CLI utility included when you install the tailwindcss npm package:
```javascript
npx tailwindcss init
```
This will create a file **tailwind.config.js** at root level of your project and would look like this:
```javascript
module.exports = {
  theme: {
    extend: {}, // color palette, font stacks, type scale, border sizes, breakpoints, etc.
  },
  variants: {}, //Using utilities to style elements on hover, focus, and more
  plugins: [], //to register third-party plugins with Tailwind
}
```

###Process your CSS with Tailwind

We will add Tailwind as a [PostCSS](https://postcss.org/) plugin which means we will create a config file **postcss.plugin.js** and add tailwind as plugin in it.

*PostCSS is a tool for transforming styles with JS plugins. These plugins can lint your CSS, support variables and mixins, transpile future CSS syntax, inline images, and more.*

We will also include [Autoprefixer](https://css-tricks.com/autoprefixer/) to deal with vendor prefixes and use [PostCSS-Import](https://github.com/postcss/postcss-import) to resolve path of an @import rule.

Let's add them first
```javascript
npm i postcss-cli autoprefixer postcss-import --save-dev
```
Now, create a config file **postcss.config.js** at the root level.
```javascript
const tailwindcss = require('tailwindcss');

module.exports = {
  plugins: [
    require('postcss-import'),
    tailwindcss('./tailwind.config.js'), //since we have a config file for tailwind
    require('autoprefixer'),
  ],
};
```
As we are going to process our CSS so it will generate a new css file with tailwind css and our css. Now create a folder named **css** under src folder and place our App.css inside this folder.

###Add Tailwind to your CSS
Create a file name **tailwind.css** under **src/css** folder

If you're using postcss-import , use imports instead of the @tailwind directive to avoid issues when importing any of your own additional files:
```javascript
@import "tailwindcss/base";

@import "tailwindcss/components";

@import "tailwindcss/utilities";
```
Then import this file in src/css/app.css
```javascript
@import './tailwind.css';
```
###Configure Your App To Build Your CSS
Next, we need to configure our project to build our CSS styles each time we run  the npm start command.

Now add a script to our package.json to run before we start our app. This will tell PostCSS to generate the css file to be used by our app.
```javascript
"scripts": {
    "start": "npm run watch:css && react-scripts start",
    "build": "npm run build:css && react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "build:css": "postcss src/css/app.css -o src/App.css", 
    "watch:css": "postcss src/css/app.css -o src/App.css"
  },
```
Here, we have added two tasks:
1. build:css ==> it will compile and build your css output into src/App.css
2. watch:css ==> it will watch the css changes and output into src/App.css

Let's add a tailwind class to change the background colour of the default app screen.

```javascript
<div className="App bg-teal-700"></div>
```
Now run your app using **npm start** and check (http://localhost:3000/)
You would notice that it runs the buildCSS command and generates App.css under src folder. 
Do remove the default css related to background to see the changes.

###Responsive design
To see how responsive design works with tailwind,  add this in App.js
```javascript
<div class="bg-red-500 sm:bg-green-500 md:bg-blue-500 lg:bg-pink-500 xl:bg-teal-500">Dummy text</div>
```
Now check your app in mobile and other breakpoints to see the changes.

As mentioned earlier, it was just about configuring tailwind with react and testing responsive design. I've just started off with Tailwind css so I am yet to build a UI design like a dashboard or a website.

I hope it helps someone who wants to start with Tailwind css.

Cheers !!!