Step 1: Create your react project
For this post, we will be using create-react-app
to create our react project. This sets up everything we need so that we can start coding relatively quickly. Open the command line and use the following commands.
npm
npx create-react-app react-app-with-tailwind
cd react-app-with-tailwind
yarn
yarn create react-app react-app-with-tailwind
cd react-app-with-tailwind
Step 2: Install Tailwind CSS
After creating our react project, and change the directory to the project folder. This is where we will install tailwind and it's dependencies.
npm
npm install -D tailwindcss postcss autoprefixer
yarn
yarn add -D tailwindcss postcss autoprefixer
This will install tailwindcss postcss and autoprefixer in dev dependencies.
Step 3: Generate Config files
The next step is to generate the configuration files that tailwind css needs. The files can be generated with the following command
npm
npx tailwindcss init -p
yarn
yarn tailwindcss init -p
This will generate two files:
tailwind.config.js
postcss.config.js
The files generated will have the default config already set-up.
Step 4: Configure path to files
Inside tailwind.config.js
we need to specify the path to our React files.
module.exports = {
content: [
"./src/**/*.{js,jsx,ts,tsx}",
],
theme: {
extend: {},
},
plugins: [],
}
This will tell tailwind the path to look for its class names and apply the styling associated with those class names.
Step 5: Add Tailwind Directives
Add the following lines to index.css:
@tailwind base;
@tailwind components;
@tailwind utilities;
That's it!
Tailwind CSS has been successfully setup in our React app. We can now use the utility classes in our project.
Top comments (0)