Getting Started With TailwindCSS v3.0 in React

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.

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.

npm install -D tailwindcss postcss autoprefixer

Creating TailwindCSS Config

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

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.

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

tailwind.config.js is also useful for defining 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.

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

Running some TailwindCSS code

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

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.

npm run start

You should see something similar below.

Conclusion

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

Follow me on Twitter at @GregoryAGaines or my blog at gregorygaines.com