How to setup Tailwind CSS with React

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 dont need to eject the CRA to use Tailwind.

First, lets 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, lets 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:

// tailwind.config.jsmodule.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:

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

• @tailwind base

This line is to inject Tailwinds 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, lets open package.json and update the scripts like so:

// 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:

// src/index.tsximport 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, dont forget to add this output file to .gitignore, otherwise youll be committing a large css file to your repo!

Now your project is empowered by Tailwind CSS, lets take an example from official docs and add input field with some component classes to make sure its actually working:)

// src/App.jsimport 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="[email protected]">    </div>  )}export default App

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

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. Hopefully this helps someone whos looking to use Tailwind in their React project.

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