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:

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

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.

Comments

[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>;
}