How To Use Tailwind CSS With React!
Tags: tailwindcss, react, beginners
Published: 2023-07-19 15:17:37

**_Why this topic?_**

CSS can be quite a challenge for anyone new or experienced working on their front-end applications. It is one thing to code out a functioning, easy-to-use application but it is another story to have a application that is appealing to the eye. Unfortunately, the general public is subject to the practice of judging a book by it's cover and if the cover does not scream pretty, then the public loses interest. Software engineers can express their artistic visions through CSS but the how is always the question and the question can only find its answers through ones' tool. One of the tools that can help ease the pain and process of creating a design is Tailwind CSS.

**_What is Tailwind CSS?_**

Tailwind CSS is a utility-first CSS framework which makes it very easy to apply great styling to your React web application by choosing from the framework’s ready-made CSS classes. Tailwind CSS is quite popular among today's CSS frameworks and is used by known tech companies such as Twitch, Coursera, and Shopify. The approach that Tailwind CSS offers speeds up the styling process significantly and in setting up comprises only very few steps. 

**THE TUTORIAL**

_Creating Your React Project_

Since React is the example that is being used today, the very first step will be creating a React project. The way to do is to use the `create-react-app` script on the command line:

`$ npx create-react-app a-react-app-with-tailwind`
`$ cd react-app-with-tailwind`

The following output after running the `create-react-app` script via the npx command should look something like this:


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/72q8gl94566gm1apv7qs.png)

_Install Tailwind CSS_

After having entered the newly created project folder `a-react-app-with-tailwind`, we can now add the Tailwind CSS library and it's dependencies `postcss` and `autoprefixer` by using NPM (Node Package Manager) in the following way:

`$ npm install -D tailwindcss postcss autoprefixer`

_Generate Configuration Files_

The next step is to create default configuration files for Tailwind in the project folder and in order to configure everything we need for Tailwind, we will need the following two configuration files:

_tailwind.config.js_
_postcss.config.js_

These files can be generated by executing the following command in the project folder:

`$ npx tailwindcss init -p`

This command, on top of creating the files, makes it so the default configuration structure is already available in said files.

_Configure Path To Template Files_

Inside `tailwind.config.js`, we need to specify the path to our React template. This can be done by adding the following configuration setting:

`module.exports = {
**   content: [
     "./src/**/*.{js,jsx,ts,tsx}",
   ],**
   theme: {
     extend: {},
   },
   plugins: [],
 }`

Paths are configured as glob patterns, patterns that can expand a wildcard pattern into a list of pathnames that match a given pattern, which means it's easy to match all of the content files in a project without a ton of configuration. We use * to match anything except slashes and hidden files, and ** to match zero or more directories. The values between `{}` are seperated by a comma to match against a list of options. In the example above, the setting is matching all files with a file extenstion of _js, jsx, ts, and tsx_ covered within the _src_ subfolder.

An important thing to note is that these paths are relative to the root of your project, **NOT** the `tailwind.config.js` file.

_Add Tailwind Directives_

Lastly, add the following Tailwind CSS directives into file `index.css`:

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

Having done that, we can now make use of Tailwind's CSS classes within our main React component in App.js.

_**LET'S USE TAILWIND CSS!**_

To see Tailwind CSS in action, let's replace any default code in `src/App.js` with the following implemenatation:

`function App() {
  return (
    <div className="container mx-auto bg-gray-200 rounded-xl shadow border p-8 m-10">
      <p className="text-3xl text-gray-700 font-bold mb-5">
        Welcome!
      </p>
      <p className="text-gray-500 text-lg">
        React and Tailwind CSS in action
      </p>
    </div>
  );
}
export default App;`

Start the development web server with the following command:

`$ npm run start`

and you should be able to see the following result in the browser:


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8gtd3l1y0v9dwhiwlwzs.png)

In the event that things did not go as smoothly as expected, Tailwind CSS has a dedicated website [](https://tailwindcss.com/) that can answer any complex or further questions. 

In the event that things did go smoothly, it is recommended to use [](https://nerdcave.com/tailwind-cheat-sheet) as a reference guide to use Tailwind CSS in all of it's freedom. 

That being said, may Tailwind CSS be the proper paint and brush to help you paint out your front-end to match the vision for your application!