DEV Community


Posted on


What the heck is Tailwind CSS and should I use it?

Before I started at Flatiron School, I had to learn three different programming languages, JavaScript, HTML, and (my least favorite) CSS. I hate working with CSS, it's super annoying, naming classes is hard, and I always end up with a really ugly and bloated css file at the end of a project. There was no way I could possibly keep working with it, so I decided to go out and find a better way. While there are a lot of CSS frameworks out there that could solve this problem, today I'll be writing about one I've been messing with - Tailwind.

On the official Tailwind website they describe the framework as "a utility-first CSS framework" that you can use "directly in your markup". After I read a little bit and watched a couple of videos, I knew that I had to give this a shot. Tailwind offers a lot of customization with lots of pre-built utility classes, which would make your HTML look something like this; <h1 class="text-green bg-gray-100 font-mono">Hello world!</h1>. This doesn't produce anything super detailed, just green text with a gray background in a monospaced font.

Now you may be asking yourself "Chase, is this amazing framework compatible with a component-based JavaScript framework? How about React?" The answer is yes, I'll even walk you through a quick installation guide (that can also be found here).

First, using create-react-app, you want to create a new React app like so npx create-react-app tailwind-project

Next, change into your new project directory and install TailwindCSS using the following command npm install -D tailwindcss

Now that we have Tailwind installed, we need to initialize the configuration file with npx tailwindcss init

Navigate into the new file called tailwind.config.js and make the following changes:

making changes in our tailwind config file

Finally, navigate into your index.css file and make these changes as well:

making changes in index.css

And next time you use npm run start, you can make your new project beautiful with the power of Tailwind! Hooray! Here's a little example of a hello world item in Tailwind and the code that goes along with it.

tailwind hello world example

tailwind hello world code

Top comments (1)

brense profile image
Rense Bakker

Please don't use it, it makes me sad when I have to maintain a tailwind project and I get asked to add something dynamic based on user input. Tailwind adds a pre compilation step that generates a finite list of utility classes. Because it is generated css, you cannot access any of the defined values like breakpoints for example, meaning you will have duplicate definitions if you need to do some custom logic based on screen sizes. The biggest problem there is that you cannot match exactly the logic used in the tailwind library without duplicating its codebase, for example the dark mode logic.

You should use a css in js solution like emotion styled components, that will allow you to access all these styling/theming flags in a convenient way at runtime, this is entirely impossible with tailwind for example:

import { useTheme } from '@mui/material/styles';
import useMediaQuery from '@mui/material/useMediaQuery';

function MyComponent() {
  const theme = useTheme();
  const matches = useMediaQuery(theme.breakpoints.up('sm'));

  return <span>{`theme.breakpoints.up('sm') matches: ${matches}`}</span>;
Enter fullscreen mode Exit fullscreen mode

Top Posts from the React Ecosystem

1. Changes In The Official React Documentation

The former React Docs Beta has been officially released as the updated React documentation at after years of hard work and refinement. Check out the brand new React Docs: What’s New in the Updated React Docs

2. CRA's Time is Over

React developer team has removed create-react-app (CRA) from official documentation rendering it no longer the default setup method for new projects. The bulky setup, slow, and outdated nature of CRA led to its removal: create-react-app is officially dead

3. How to Fetch Articles for Your Portfolio

Integrate the articles of your profile into your personal portfolio with either React, Vue, or Next.js by following these simple steps. It outlines how to include frontend to pull the information and correctly utilizes the API: How to Fetch Your Articles for Your Portfolio with React