Steps to Set up Tailwind CSS with Create React App
Step 1: Create a New React App
If you haven’t already installed Create React App, you can do so by running the following command:
npx create-react-app my-tailwind-app
Note: Replace my-tailwind-app with the name of your project.
Step 2: Install Tailwind CSS
Navigate into your project directory:
cd my-tailwind-app
Now, install Tailwind CSS and its dependencies:
npm install tailwindcss postcss autoprefixer
Step 3: Configure Tailwind CSS
Create a tailwind.config.js file in the root directory of your project:
npx tailwindcss init
This command generates a tailwind.config.js file where you can customize Tailwind CSS according to your needs.
Step 4: Create PostCSS Configuration
Create a postcss.config.js file in the root directory and add the following content:
module.exports = {
plugins: [
require('tailwindcss'),
require('autoprefixer'),
],
}
This configures PostCSS to use Tailwind CSS and autoprefixer.
Step 5: Include Tailwind CSS in Your Stylesheets
Open the src/index.css file and import Tailwind CSS:
/* ./src/index.css */
@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";
Step 6: Configure your template paths
Add the paths to all of your template files in your tailwind.config.js file
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
"./src/**/*.{js,jsx,ts,tsx}",
],
theme: {
extend: {},
},
plugins: [],
}
Step 7: Start Your React App
Now, start your React app:
npm start
Your app should now be up and running with Tailwind CSS integrated. You can start using Tailwind CSS utility classes in your React components.
Output:
How to Install Tailwind CSS with Create React App?
In this article, we will see how to install Tailwind CSS with React. Tailwind CSS is a utility-first CSS framework that allows you to rapidly build custom user interfaces. Combining it with Create React App offers a powerful combination for developing React applications.