A crash course on TailwindCSS in React

Over the years, I've used a few solutions for styling (React) components. Started out with vanilla CSS, later on with SCSS, and then a few JSS solutions such as Styled Components, Emotion, and Stitches. None of those (except maybe Stitches, but about that in a different post) has been as enjoyable as TailwindCSS has been for me. So here's a crash course based on my experience with TailwindCSS. We use it on this blog as well (at the time of writing this article).

What is it?link

TailwindCSS is a utility-first CSS framework with pre-defined classes that you can use directly in your markup – allowing you to style your markup as you're writing it. Cool.

In traditional web development, you would first write your markup (HTML), then style it with CSS. With TailwindCSS, you can style your markup right away. That looks something like this:

<div class="p-4 bg-gray-100 shadow-md rounded-xl">
  <h2 class="text-2xl font-bold">Hello, world!</h2>
  ...
</div>

Whereas previously, you would need to write your HTML in one file, come up with a name for the class, and then style it in a separate CSS file.

<!-- index.html -->
<div class="a-class-name-that-you-had-to-think-really-hard-about">
  <h2>Hello world</h2>
</div>

/* index.css */
.a-class-name-that-you-had-to-think-really-hard-about {
  border-radius: 12px;
  background-color: #fafafa;
  padding: 12px;
}

Install TailwindCSSlink

There are several ways to start using TailwindCSS. Depending on your setup, you have a few options. We'll cover only the one where you install it as a node_module in your project. This is probably the go-to option for most people who use some of the more popular frameworks like React, Vue, Angular, etc...

# Via NPM
> npm install tailwindcss
# or Yarn
> yarn add tailwindcss
# Create tailwind.config.js
> npx tailwindcss init

The last command created a file tailwind.config.js in the root directory of your project. Configure the config for the directories you want TailwindCSS to be used in:

// tailwind.config.js
module.exports = {
  content: ['./src/**/*.{html,js}'],
  theme: {
    extend: {},
  },
  plugins: [],
}

You can look up the other ways to use it and the rest of the documentation here.

How do I use it?link

Create an index.css file in a directory of your project where you have the rest of your styles if you're using a non-JSS solution.

Let's say you have src/styles/index.css

Populate that file with

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

Import this file in the root file of your project.

// App.tsx
import './styles/index.css'

Start using it within your components.

// src/components/Button.tsx

export default function Button(props) {
  return <button {...props} className="rounded-md bg-blue-600 text-neutral-50 dark:text-neutral-900" />
}

Protip: It would be nice if the consumer of your components could pass a className prop and it would be added to the component. Consider joining the received className with the one you create.

// src/components/Button.tsx
export default function Button(props) {
  // TODO: Add the className to the props only if it was passed to the component
  return (
    <button
      {...props}
      className={['rounded-md bg-blue-600 text-neutral-50 dark:text-neutral-900 ...', props.className].join(' ')}
    />
  )
}

My markup is ugly, is there a different way?link

Yes there is. You can create CSS components and apply the TailwindCSS classes to them.

/* styles/components/Button.css */
.button--raised {
  @apply bg-blue-600 rounded-md;
  @apply text-neutral-50 dark:text-neutral-900;
  @apply px-4 py-2;
}

export function GrandSchemeComponent() {
  return <div>
    ...
    <button className="button--raised">
    ...
  </div>
}

Don't forget to import the file in the root file of your project, or where you import component styles so it becomes available to your components.

Bottom linelink

TailwindCSS is by far the path of least resistance for me. I can style components as I write their structure. And with all the utility classes it gives me, I can pretty much do anything I want. Pseudo-classes like hover, focus, active, as well as classes for responsive breakpoints make TailwindCSS a great tool for any project.

What do you think? Do you think TailwindCSS would be a good fit for your project? If so, please let me know! I'd love to hear from you.

Send us a tweet @delvingdev