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
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:
- Node.js 12.13.0 or higher version
- Yarn / npm 5.6 or higher installed on you PC
- Basic knowledge of how CSS works
- Basic understanding of React and TailwindCSS
Create React App
Start with React app project, if you don’t have one. First of all, create React app using the following command:
Setting up Tailwind CSS
Install Tailwind via npm
Install Tailwind and its peer-dependencies using npm:
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:
Next, create a craco.config.js at the root of our project and add the tailwindcss and autoprefixer as PostCSS plugins:
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:
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:
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:
Tailwind will swap these directives out at build-time with all of the styles it generates based on your configured design system.
Finally, ensure your CSS file is being imported in your ./src/index.js file:
You’re finished! Now when you run npm run start, Tailwind CSS will be ready to use in your Create React App project.
The above article will help you to easily implement TailwindCSS with ReactJS. I hope this will helpful to you.
For more article: Click Here