Getting Started With TailwindCSS v3.0 in React
Tags: javascript, tailwindcss, tutorial, beginners
Published: 2022-04-12 16:36:54

## Why TailwindCSS
Say whatever you want about Utility-First CSS frameworks, it's here to stay! Traditional CSS was designed for "monolithic" writing where you gave each component a specific selector which led to code duplication. Seems kinda outdated in the current space of splitting and abstracting components. Techniques like BEM were invented to mitigate some of this damage.

TailwindCSS is one of the premier Utility-First CSS frameworks that automatically generate CSS classes to handle almost every styling use-cases you may encounter. With its built-in design system, which is based on an underlying scale, all your spacings, margins, and paddings are consistent and beautiful. I can go on for hours, but let's get into how to use TailwindCSS.

## Creating a React App
Start a new React app by running the command below.

```c
npx create-react-app tailwindcss-app
```

## Installing TailwindCSS
TailwindCSS depends on the following npm packages.
1. **TailwindCSS** - The TailwindCSS framework
2. **PostCSS** - JavaScript based CSS transformation tool
3. **Autoprefixer** - CSS parser that automatically adds vender prefixes

All three can be installed with the following command.

```c
npm install -D tailwindcss postcss autoprefixer
```

## Creating TailwindCSS Config
Configurations for TailwindCSS and PostCSS need to be generated with command below.

```c
npx tailwindcss init -p
```

This will generate the two files `tailwind.config.js` and `postcss.config.js`.

Next, add your code source the the `tailwind.config.js` config.

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

`tailwind.config.js` is also useful for defining [custom styles](https://tailwindcss.com/docs/adding-custom-styles) or extending existing styles.

## Import TailwindCSS directives
We need to import the TailwindCSS styles into our project. Most default React projects contain an `index.css` style that's applied to the **entire** project.

```
src /
 | - App.js
 | - App.css
 | - index.css
   ...
```

We import TailwindCSS here since we only have to import it once.

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

## Running some TailwindCSS code 
Let's add some code and TailwindCSS styling to `App.js`.

```javascript
function App() {
  return (
    <section className="px-4 py-24 mx-auto max-w-7xl">
      <div className="grid items-center w-full grid-cols-1 gap-0 mx-auto lg:grid-cols-11 lg:gap-24 xl:w-11/12">
        <div className="col-auto text-center md:col-span-7 lg:text-left">
          <h1 className="mb-4 text-3xl font-bold leading-tight text-gray-900 md:text-4xl md:leading-none tracking-none md:tracking-tight">Ready
            to start your TailwindCSS jurney?</h1>
          <p className="mb-10 text-lg font-light text-gray-500 md:text-xl md:tracking-relaxed md:mb-4">
            Your move!
            Yu-Gi-Oh!
            Your move!
            Yu-Gi-Oh!
            It's time to du-du-du-du-dududududududuel!
            Yu-Gi-Oh! (-Oh! -Oh! -Oh!)
            Your move!
            Yu-Gi-Oh is king of games!
            It's time to du-du-du-du-dududududududuel!
            Yu-Gi-Oh!
          </p>
        </div>
        <div className="col-auto md:col-span-4">
          <form className="mb-6 border-0 rounded-lg shadow-xl">
            <div className="cursor-pointer px-6 py-4 text-center bg-blue-500 text-white font-bold rounded">
              Get started
            </div>
          </form>
        </div>
      </div>
    </section>

  );
}

export default App;
``` 

Now start the React app with the below command.

```c
npm run start
```

You should see something similar below.

<img src="https://i.imgur.com/8aXTjy3.png" />

## Conclusion
Hopefully, you have your TailwindCSS project ready to go. Thanks for reading! 

Follow me on Twitter at <a href="https://twitter.com/GregoryAGaines">@GregoryAGaines</a> or my blog at [gregorygaines.com](https://www.gregorygaines.com)