How to Integrate Tailwind CSS into a React app

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 comma…


This content originally appeared on DEV Community 👩‍💻👨‍💻 and was authored by Neto Ukpong

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.


This content originally appeared on DEV Community 👩‍💻👨‍💻 and was authored by Neto Ukpong


Print Share Comment Cite Upload Translate Updates
APA

Neto Ukpong | Sciencx (2022-10-19T16:20:02+00:00) How to Integrate Tailwind CSS into a React app. Retrieved from https://www.scien.cx/2022/10/19/how-to-integrate-tailwind-css-into-a-react-app/

MLA
" » How to Integrate Tailwind CSS into a React app." Neto Ukpong | Sciencx - Wednesday October 19, 2022, https://www.scien.cx/2022/10/19/how-to-integrate-tailwind-css-into-a-react-app/
HARVARD
Neto Ukpong | Sciencx Wednesday October 19, 2022 » How to Integrate Tailwind CSS into a React app., viewed ,<https://www.scien.cx/2022/10/19/how-to-integrate-tailwind-css-into-a-react-app/>
VANCOUVER
Neto Ukpong | Sciencx - » How to Integrate Tailwind CSS into a React app. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2022/10/19/how-to-integrate-tailwind-css-into-a-react-app/
CHICAGO
" » How to Integrate Tailwind CSS into a React app." Neto Ukpong | Sciencx - Accessed . https://www.scien.cx/2022/10/19/how-to-integrate-tailwind-css-into-a-react-app/
IEEE
" » How to Integrate Tailwind CSS into a React app." Neto Ukpong | Sciencx [Online]. Available: https://www.scien.cx/2022/10/19/how-to-integrate-tailwind-css-into-a-react-app/. [Accessed: ]
rf:citation
» How to Integrate Tailwind CSS into a React app | Neto Ukpong | Sciencx | https://www.scien.cx/2022/10/19/how-to-integrate-tailwind-css-into-a-react-app/ |

Please log in to upload a file.



There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.

Related Posts