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.