How to setup Tailwind CSS with React
Tags: react, tailwindcss, typescript, beginners
Published: 2020-09-11 20:37:37

Tailwind CSS is a *utility-first CSS framework for rapidly building custom designs*. Instead of having predefined components like Bootstrap and Material UI do, it comes with CSS helper classes and these classes allows you to create custom designs easily.

I'm working on a little side project and decided to use Tailwind CSS although it is a quite bit of an overkill. While there's some learning curve from being different from other CSS frameworks, it gives you whole new development experience once you get the hang of it.

## Add to React/TypeScript Project

This is going to be a React + TypeScript project, and with this approach shown below, you don’t need to eject the CRA to use Tailwind.

First, let’s create the project by running:

`create-react-app react-ts-tailwind-example —typescript`

then

`cd react-ts-tailwind-example`

Once you are in the root directory, run the following to install dependency package(s):

`yarn add tailwindcss`

`tailwindcss` package will add Tailwind to your project and enables its own CLI tool.

Next step is to set up Tailwind within the project so you can actually use it. To do so, let’s first run the following command to create a config file:

`npx tailwind init`

Upon completion, it should generate `tailwind.config.js` that looks like this:

```javascript
// tailwind.config.js
module.exports = {
  purge: [],
  theme: {
    extend: {},
  },
  variants: {},
  plugins: [],
}
```

This is where you store plugins and theme setting etc. but we are not going to touch it this time.

After that, you need to create `src/tailwind.css` file and add following:

```css
/* src/tailwind.css */
@tailwind base;
@tailwind components;
@tailwind utilities;
```

* `@tailwind base`

  This line is to inject Tailwind’s base style, which is basically Normalize.css plus some additional styling provided by Tailwind.
* `@tailwind components`

  This injects component classes registered by plugins that are found in tailwind.config.js file.
* `@tailwind utilities`

  This injects all of utility classes provided by Tailwind CSS. These are also generated based on the config file.

In order to use Tailwind without ejecting from CRA build system, we need to add a script to build Tailwind before the start and build script. For that, let’s open `package.json` and update the scripts like so:

```javascript
// package.json
"scripts": {
  "build:tailwind": "tailwindcss build src/tailwind.css -o src/tailwind.output.css",
  "prestart": "npm run build:tailwind",
  "prebuild": "npm run build:tailwind",
  "start": "react-scripts start",
  "build": "react-scripts build",
  "test": "react-scripts test",
  "eject": "react-scripts eject"
},
```

The `build:tailwind` script will find `src/tailwind.css` we created earlier, compile it then save the output as `src/tailwind.output.css`. Since we added `prestart` and `prebuild`, these will run before the existing `start` and `build` scripts. It is to ensure output file is generated before the actual `start` or `build` happens.

Finally, you can import tailwind.output.css file that is generated by the above script in your `src/index.tsx` file like this:

```javascript
// src/index.tsx
import React from 'react'
import ReactDOM from 'react-dom'
import './tailwind.output.css'
import App from './App'

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
)
```

\*Also, don’t forget to add this output file to `.gitignore`, otherwise you’ll be committing a large css file to your repo!

Now your project is empowered by Tailwind CSS, let’s take an example from [official docs](https://tailwindcss.com/components) and add input field with some component classes to make sure it’s actually working:)

```javascript
// src/App.js
import React from 'react'

const App: React.FC = () => {
  return (
    <div className="App">
      <input className="bg-white focus:outline-none focus:shadow-outline border border-gray-300 rounded-lg py-2 px-4 block appearance-none leading-normal m-10" type="email" placeholder="jane@example.com">
    </div>
  )
}

export default App
```

Run `yarn start` and you should see an input like this on your browser:

![input-example](https://dev-to-uploads.s3.amazonaws.com/i/adob7db1tfsn5xm9hddb.png)

There you go! This is a super quick setup and only touched how to set it up in your React project. For learn more on Tailwind, checkout their [official site](https://tailwindcss.com/). Hopefully this helps someone who’s looking to use Tailwind in their React project.

Thanks for reading, and please share if you like what you just read!