What is Tailwind?

You’ve probably heard of Tailwind by now, but if you haven’t, it is essentially a utility-first CSS framework and is much less opinionated compared to other CSS frameworks like Bootstrap and Foundation. According to  tailwindcss.com, it is described as:

A highly customizable, low-level CSS framework that gives you all of the building blocks you need to build bespoke designs without any annoying opinionated styles you have to fight to override.

In my opinion, this makes Tailwind a great option to use for your projects. You get the benefits of rapid development, without the opinionated styles that you ultimately override anyway.

So what if we want to use Tailwind with React, is it as simple as just including a style sheet? Not exactly. Because of how Tailwind is built and some of the optimizations they have in place (i.e. purging unused CSS), there are a couple extra steps to properly set it up in a React project.

Getting the Project Setup

To get started, either jump into your own React project or start up a new one with npx create-react-app tailwind-react-app.

Installing Dependencies

Next, let’s install a couple of dependencies via npm i @fullhuman/postcss-purgecss postcss-cli tailwindcss --save-dev.

A brief explanation of each dependency:

• fullhuman/postcss-purgecss - used to purge unused CSS to create the smallest final CSS file possible. If you don’t purge unused CSS, tailwind is actually over 2MB uncompressed.
• postcss-cli - Tailwind is a PostCSS plugin. You don’t need to use PostCSS as the preprocessor, but in this case we will in order to keep things simple.
• tailwindcss - the Tailwind library and utilities

#tailwind #react #css