How to Setup Tailwind CSS Framework with React

Tailwindcss provides a modern spin on writing css. And unlike bootstrap, it allows us write css without predefined classes i.e we can create our own custom styles without external opinions on how things should look.

Setting up tailwind is pretty straightforward, but with React, it might seem a little daunting. Here’s a quick tutorial to get you started creating awesome class-based inline styles using tailwindcss.

1. Create a new react app(duhh!).

 npx create-react-app tailwind-app && cd tailwind-app

2. I like to write my css in SASS so let’s setup SCSS. Run the following command to install the SASS package.

npm install node-sass

3. Install all the packages we need; tailwindcss itself, postcss-cli(helps us extract tailwind utility classes into our own css files) and autoprefixer(helps us ensure that the CSS we write is supported in all browsers). Let’s install them as development dependencies by using the -D flag.

npm i tailwindcss postcss-cli autoprefixer -D

4. Run the following command to generate a tailwind configuration file. This file contains all the tailwind classes.

npx tailwind init --full

you should now see a tailwind.config.js file in your app directory.

5. Now, we need to setup our Postcss config to help us build our css files. First, let’s create the configuration file.

touch postcss.config.js

6. Next, copy and paste the following code into the postcss.config.js file. This block of code tells postcss to use the tailwindcss and autoprefixer plugins when creating out css/scss file.

Autoprefixer is a CSS post processor. It combs through compiled CSS files to add or remove vendor prefixes like -webkit and -moz after checking the code against caniuse.com.

module.exports = {
 plugins: [require("tailwindcss"), require("autoprefixer")]
};

7. Next, let’s create a styles directory. I like to keep my styles folder inside my src folder. Inside the src/styles directory, create a tailwind.scss file and also move your index.css file in here. Rename your index.css to index.scss

Make sure to update the reference to index.css in your index.js to “./styles/index.scss”

8. Head into the tailwind.scss. We need to inject the tailwind utility classes into the file. Add the following code. We specify the tailwind utility classes we want in the tailwind.scss file. From here, postcss will extract the classes from the declarations and pushes them into our index.css file as you will see.

@tailwind base;
@tailwind components
@tailwind utilities

9. Finally, head into your package.json file. We need to make some changes to our scripts here to ensure that Postcss bundles all our css from tailwind.scss into our index.scss file. First, we create a build:css script. We use the postcss command (made available by the postss-cli) to extract the tailwind classes from tailwind.scss and output it into index.scss

"scripts": {
   "start": "npm run build:css && react-scripts start",
   "build": "npm run build:css && react-scripts build",
  "test": "react-scripts test",
   "eject": "react-scripts eject",
  "build:css": "postcss src/styles/tailwind.scss -o src/styles/index.scss "
}

Your package.json scripts should now look like above.

Simply run

npm start

All the tailwind classes are now available to use. I like to refer to the documentation to see the class names sometimes but generally, a lot of the class names are intuitive if you’re coming from bootstrap.

If you’re looking to add additional CSS styles, you can add them inside the tailwind.scss file we have created.

NB Each time you make a change to the tailwind.scss file, you would need to rebuild the css by stopping the server and running

npm start

Previously published at https://medium.com/@adebola.niran/how-to-setup-tailwindcss-with-create-react-app-and-s-b7243607c3e7