How to setup tailwindcss with create-react-app and SASS.

Image for post
Image for post

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.

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, like you normally would and your app should start running. You would notice that our index.scss file now contains all the css classes tailwind provides.

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.

Image for post
Image for post
Adding custom classes to tailwindcss

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 again.

In production, you should only ship out the CSS classes you use. Here’s how to do that.

Written by

Full-stack Engineer. Rails/Node.js/React. I love plantain chips! Reach me at Adebola.dev.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store