Installing Tailwind in your React App
Hi there! Thanks for coming to my blog. Today we are going to be installing and configuring Tailwind in our React application. So, let's get straight into it shall we?
Creating your application
First we are going to run our create-react-app <name-of-your-application
or npx create-react-app <name-of-your-application>
if you do not have create-react-app
installed on your system.
Cleaning up your react project
There are a number of files you will not need for this tutorial so you might just want to clean up your app just for simplicity sake. You can start by deleting the following files: App.test.js
, serviceWorker.js
, logo.svg
, setupTests.js
and App.css
. Remove any references to these files in your index.js
and App.js
file.
Next you are going to clear all the code in the return statement and just pop an h1
tag with Hello World
in there for now. By now you should have three files in your src folder, index.js
, App.js
, and index.css
.
Configuring Tailwind
- Run the following command
yarn add tailwindcss
- Clear your
index.css
file and add the following:
We are going to use the@tailwind base; @tailwind components; @tailwind utilities;
index.css
file to generate the rest of our tailwind css. Create a tailwind config file with the following command
npx tailwindcss init
. This will generate atailwind.config.js
file which is where we are going to define any of our own custom classes that do not ship with Tailwind. Next we are going to process the lines in step 2 into actual useable cssWe need to process our css so create a file called
postcss.config.js
. Place the following code in yourpostcss.config.js
file:module.exports = { plugins: [ require('tailwindcss'), require('autoprefixer'), ] }
This file will automatically be picked up by our project whenever we run a postcss command
- We are going to install
postcss
andautoprefixer
as it is a requirement by Tailwind, so run the following command in your terminal:yarn add postcss-cli autoprefixer
(Note: you can use npm to install your packages as well, I just prefer using yarn) - Next we want to create a script that will build our css. So head into your
package.json
file and add the following scripts:
This command will take the"scripts": { "build:css": "postcss src/index.css -o src/tailwind.css" //... }
index.css
file and create atailwind.css
file with all of the Tailwind classes. - Run
yarn build:css
. Personally I only run this command after I have added some custom classes in thetailwind.config.js
file because every time you add a custom class, you have to run the command so your custom css can be added to thetailwind.css
file. However, if you prefer to have the file run every time you run thestart
script, alter your script as follows:"scripts": { "start": "yarn build:css && react-scripts start", "build": "yarn build:css && react-scripts build", }
- Lastly, in your
index.js
import thetailwind.css
file instead of theindex.css
file.
Just one last tip, if you are using VSCode, install the Tailwind CSS Intellisense extension. It helps immensely when typing out your tailwind css classes.
Thank you for taking the time to read this! Please like and share. See you next time 😉💥!
Co-Founder, Hashnode
Hey 👋 interesting article. Please tag it with React for better reach!
Comments (2)