How to Implement Tailwind CSS in ReactJS?

tailwind

Nowadays, in a market plethora of frameworks and awesome libraries have been built to simplify the work of developers to create an intuitive interface. However, quite a lot of them (Bootstrap, Foundation) impose design decisions that are difficult to undo; they come with predefined components, therefore, eliminating the need for dynamic customization. This is the reason why Tailwind CSS is considered to be a good choice for building 21st-century web interfaces. Tailwind CSS, you get to create the components that suit what you want or what you are working on. These components can be created by harnessing the power of the utility-first prowess of Tailwind CSS. In this article, we will learn how to implement Tailwind CSS in ReactJS.

Before starting the implementation process, understand the basics of ReactJS and Tailwind CSS.

Basic of ReactJS

React.js is an open, front-end, JavaScript library for building user interfaces or UI components. It is maintained by Facebook and a community of individual developers and companies. React can be used as a base in the development of single-page or mobile applications.

Basic of Tailwind CSS

Tailwind CSS is a utility-first CSS framework for rapidly building custom designs. Tailwind CSS is a highly customizable, low-level CSS framework that gives developers all of the building blocks they need to build bespoke designs without any annoying opinionated styles.

Steps to implement Tailwind CSS in ReactJS:

Many people think that react needs special React-specific CSS solutions – things like styled-components or a design framework like Material UI. It actually doesn’t. In fact, React works perfectly with plain CSS files, because React’s only job is to render DOM elements to the page. Those DOM elements can have CSS class names (applied with the className prop in React), and the browser will take care of applying the appropriate styles.

Tailwind is a plain CSS library. It works perfectly with React and any other UI framework that renders to the DOM. All you need to do is ensure Tailwind’s CSS file is on the page, either via a <link> tag, or an import if you’re using a bundler.

To implement Tailwind it needs the following things:

Create React App

Start with React app project, if you don’t have one. First of all, create React app using the following command:

react

Setting up Tailwind CSS

Install Tailwind via npm

Install Tailwind and its peer-dependencies using npm:

npm install -D tailwindcss@npm:@tailwindcss/postcss7-compat @tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9

Note: Create React App doesn’t support PostCSS 8 yet so you need to install the Tailwind CSS v2.0 PostCSS 7 compatibility build.

Install and Configure CRACO

Create React App doesn’t let you override the PostCSS configuration, we also need to install CRACO to configure Tailwind.

npm install @craco/craco

Once it’s installed, update your scripts in your package.json file to use craco instead of react-scripts for all scripts except eject:

code

Next, create a craco.config.js at the root of our project and add the tailwindcss and autoprefixer as PostCSS plugins:

config

Note: Before using PostCSS plugins, you should read the documentation on using PostCSS as your preprocessor.

Create your configuration file

Next, generate your tailwind.config.js file:

npx tailwindcss init

This will create a minimal tailwind.config.js file at the root of your project:

tail

Configure Tailwind to remove unused styles in production

In your tailwind.config.js file, configure the purge option with the paths to all of your components so Tailwind can tree-shake unused styles in production builds:

tailconfig

Include Tailwind in your CSS

Open the ./src/index.css file that Creates React App generates for you by default and use the @tailwind directive to include Tailwind’s base, components, and utility styles, replacing the original file contents:

implement

Tailwind will swap these directives out at build-time with all of the styles it generates based on your configured design system.

For best practices extending Tailwind with your own custom CSS, read the documentation on adding base styles, extracting components, and adding new utilities.

Finally, ensure your CSS file is being imported in your ./src/index.js file:

configure

You’re finished! Now when you run npm run start, Tailwind CSS will be ready to use in your Create React App project.

Conclusion

The above article will help you to easily implement TailwindCSS with ReactJS. I hope this will helpful to you.

For more articles –