28th May 2021

How Designer Can Start TailwindCSS with ReactJS

Web

Written By, Shivangi Majithiya

Overview

Being the best web design company, we believe that the design of the website creates first impressions on a website visitor. A well-designed website grabs attention of the visitors and converts them into customers.

We are going to take a glimpse at how designers can start TailwindCSS with ReactJS in this blog. Before that, did you read our first blog of tailwindCSS setup? You can check our previous blog for an initial understanding of tailwindCSS setup and get an idea of PostCSS.

TailwindCSS setup with ReactJS

For Setup of Tailwind CSS you need to have Node.js 12.13.0 or higher. Now create a new project folder for tailwind.

  • First, we need to create react app and go into that directory

    and
  • To take complete advantage of the features of TailwindCSS we need to install the TailwindCSS package and PostCSS packages by using the below command. Create React App doesn’t support PostCSS 8 yet so we need to install PostCSS 7 for now.

    Once this command runs, we have node_modules , public and src folder with package-lock.json and package.json file in our project folder.

Include CRACO

CRACO(Create React App Configuration Override) is an easy and comprehensible configuration layer for create-react-app. We can customize PostCSS configurations with the help of CRACO.

  • Create React App does not let us override the PostCSS configuration in this project so we also need to install CRACO to be able to configure TailwindCSS.
  • We have to create an craco.config.js at the root of our project and add the below code:

    tailwind-react-craco
    Now replace package.json file following code,

    With below code.
  • Now we need to create our initial configuration file of tailwind with this command. This command generates one file tailwind.config.js , we can modify tailwind styles and add our classes to this file.
  • For including @tailwind directives we need to create an assets folder in the src folder. In this, we have to create a css folder and then create tailwind-directives.css file.
    tailwind-react-config
    Now Put all three directives in tailwind-directives.css
  • Now let’s create a Postcss.config.js (PostCSS configuration file) at the root of your project and add this code in this file

    tailwind-react-postcss-config
  • To execute the build procedure for generating tailwind styles from tailwind-directives.css file, compile tailwind.css in package.json

    You can check there is one generated file tailwind.css in your project folder with all tailwindCSS styles and Autoprefixer vendor prefixes are already added. -Webkit, -moz are already available in tailwind.css.
    Now open App.js file and add tailwind.css file by @import directive.

    After that run build command :

Include sass in React Project

We can also use sass preprocessors in this React project. First of all install node-sass and import style.scss file in App.js

OR

tailwind-react-sass

Conclusion

I hope this blog might be useful for your React project . You can ask your queries or leave your comments in the comment section.

Written By,

Web Designer at Yudiz Solutions Pvt. Ltd