React is a front-end JavaScript library for creating user interfaces or UI components. This article shows you how to set up Tailwind CSS in your React application.
According to the official documentation:
Tailwind CSS is a utility-first CSS framework that allows you to quickly create user interfaces with ease. The beauty of Tailwind is that it doesn’t enforce design specifications or how your site should look; instead, you simply combine small components to create a unique user interface.
Let’s start by creating a new Create React App project using the command below:
npx create-react-app `my-project`
cd my-project
The above command installs the React boilerplate and creates a new project titled my-project
or whatever you decide to call it.
Let’s look at how to put up Tailwind CSS on the React app we just made.
To set up Tailwind, we’ll need the NPM packages below:
PostCSS: is a JavaScript-based utility for converting CSS.
Autoprefixer: PostCSS plugin to parse CSS.
You can install them using:
npm install -D tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9
Because Create React App does not currently support PostCSS 8, you must install the Tailwind CSS v2.0 PostCSS 7 compatibility build as demonstrated above.
Next, we need to install CRACO to be able to customize Tailwind because Create React App doesn’t allow you to change the PostCSS configuration natively:
npm install @craco/craco
Update your scripts in your package.json file once it’s been installed to utilize craco instead of react-scripts:
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"start": "craco start",
"build": "craco build",
"test": "craco test",
Create a craco.config.js
file and add the Tailwind CSS and autoprefixer PostCSS plugins:
module.exports = {
style: {
postcss: {
plugins: [
require('tailwindcss'),
require('autoprefixer'),
],
},
},
}
To generate your tailwind.config.js
file:
npx tailwindcss init
The command creates a minimal tailwind.config.js
:
module.exports = {
purge: [],
darkMode: false, // or 'media' or 'class'
theme: {
extend: {},
},
variants: {
extend: {},
},
plugins: [],
}
Configure Tailwind to remove any styles that are no longer in use from the production environment.
// tailwind.config.js
module.exports = {
- purge: [],
+ purge: ['./src/**/*.{js,jsx,ts,tsx}', './public/index.html'],
darkMode: false, // or 'media' or 'class'
theme: {
extend: {},
},
variants: {
extend: {},
},
plugins: [],
}
In addition, we will include the @tailwind directive in our ./src/index.css file.
Open the default ./src/index.css
file and replace the original file contents with the @tailwind directive to incorporate Tailwind’s base, components, and utilities styles:
Finally, ensure your CSS file is being imported in your ./src/index.js file:
src/index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);
You’re done! Now when you run NPM start, Tailwind CSS will be ready to use in your Create React App project.
That’s all there is to it! I hope you found the article interesting. Please do not hesitate to provide feedback.