Getting started with Tailwind CSS in React
Tailwind CSS is a popular CSS framework that allows you to rapidly build custom user interfaces. It offers a wide range of pre-built classes that you can use to style your HTML elements. Tailwind CSS is highly customizable and it can be integrated with various frontend libraries, including React.
Getting started with Tailwind CSS
In this article, we’ll walk you through the process of getting started with Tailwind CSS in React. We’ll cover the following topics:
- Installing Tailwind CSS in a React Project
- Configuring Tailwind CSS in a React Project
- Using Tailwind CSS in a React Component
Project structure
- setup-tailwindcss-react-app
- node_modules
- public
- index.html
- src
- App.js
- index.css
- index.js
- styles.css
- package-lock.json
- package.json
- README.md
- tailwind.config.js
Package dependencies
You will find the version of the following packages in React application.
1. Installing Tailwind CSS in a React Project
The first step is to create a new React project using your preferred tool. You can use Create React App or any other tool that you’re comfortable with. Once the project is set up, you can install Tailwind CSS using npm or yarn.
1 | npm install -D tailwindcss |
OR
1 | yarn add tailwindcss |
2. Configuring Tailwind CSS in a React Project
After installing Tailwind CSS, you need to configure it in your React project. The easiest way to do this is to use the official Tailwind CSS CLI utility, which generates a configuration file for your project.
1 | npx tailwindcss init |
This will create a tailwind.config.js file in the root of your project. You can use this file to customize various aspects of Tailwind CSS, such as colors, fonts, spacing, and more.
Let’s add the paths to all of your template files in your tailwind.config.js file.
1 2 3 4 5 6 7 8 | /** @type {import('tailwindcss').Config} */ module.exports = { Â content: ["./src/**/*.{html,js}"], Â theme: { Â Â extend: {}, Â }, Â plugins: [], } |
You also need to create a CSS file to import Tailwind CSS styles. Create a new file called styles.css in your src folder and add the following code:
1 2 3 | @tailwind base; @tailwind components; @tailwind utilities; |
This file imports the base, components, and utilities styles from Tailwind CSS. You can use these styles to build your user interface.
Next, you need to import the styles.css file in your index.js file, which is the entry point of your React application.
1 2 3 4 5 6 7 8 9 10 11 12 | import React from 'react'; import ReactDOM from 'react-dom/client'; import './styles.css'; import './index.css'; import App from './App'; const root = ReactDOM.createRoot(document.getElementById('root')); root.render( Â <React.StrictMode> Â Â <App /> Â </React.StrictMode> ); |
3. Using Tailwind CSS in a React Component
Now that you have installed and configured Tailwind CSS in your React project, you can start using it in your React components.
For example, you can use Tailwind CSS classes to style your HTML elements. Here’s an example of a React component that uses Tailwind CSS classes to style a button:
1 2 3 4 5 6 7 8 9 10 | import React from 'react'; function App() {  return (   <h1 class="text-3xl hover:text-pink-600">    Getting started with Tailwind CSS in React - Clue Mediator   </h1>  ); } export default App; |
In this example, we’re using Tailwind CSS classes to set the font size, and text color on the hover of the button. You can customize these styles by changing the class names or by creating your own custom classes.
