how to setup a react app using tailwind

How to Install Tailwind CSS with React ?

by

Tailwind CSS is a utility-first CSS framework that provides a set of pre-defined CSS classes that can be used to style HTML elements. With Tailwind, you can rapidly build custom designs without having to write custom CSS code. It is highly customizable and designed to work with any JavaScript framework or library, including React.

React, on the other hand, is a popular JavaScript library for building user interfaces. It allows you to break down your application into reusable components, making it easier to manage and scale your codebase. React makes it possible to create complex and interactive UIs using a declarative syntax and a virtual DOM, which helps to optimize performance.

Installation :

We will be using these tools :

If you havan’t install these tools yet, you can click on the links for each one above.

To set up a React app with Tailwind, you can follow these steps :

1. Create a new React app using Create React App. You can do this by running the following command in your terminal:

npx create-react-app my-app

if the above command doesn’t work, run this command:

npm init react-app my-app

2. Navigate to the root directory of your new React app:

cd my-app

3. Install Tailwind CSS using npm:

npm install -D tailwindcss

4. Create a tailwind.config.js file in the root directory of your app or just run the following command in your terminal:

npx tailwindcss init

5. Delete the whole code in your `tailwind.config.js` and Add this code:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

6. Now got index.css in src folder and delete all the code and add the following code:

@tailwind base;
@tailwind components;
@tailwind utilities;

7. Run your build process with `npm run start`:

npm run start

8. Start using Tailwind’s utility classes to style your content.

App.js/App.jsx :

export default function App() {
  return (
    <h1 className="text-3xl font-bold underline">
      Hello world!
    </h1>
  )
}

Install Tailwind CSS in an existing React app 👇

To install Tailwind in an existing React application, you can follow steps 2-7 above. You’ll need to make sure that you have the appropriate configuration files and that you import your Tailwind styles into your React app. If you’re using a different build system than Create React App, you may need to adjust the configuration files to match your setup.

ALSO READ – EASIEST WAY TO INSTALL TYPESCRIPT IN YOUR PROJECT.
ALSO READ – HOW TO INSTALL REACT IN YOUR REACT PROJECT ?

Leave a Comment