Tailwind CSS

Why Tailwind?

My biggest reason for using TW is that it handles a lot of the CSS that makes the styles work across browsers. I think I have an understanding of the basics but if I'm building something for a client that needs to work on different browsers, I'll have to learn a bit more than the basics to make sure things look good everywhere.

It also helps that I don't really need to come up with class names anymore. That's probably less of an issue for more seasoned front-end devs, but I find myself refactoring class names with normal CSS way more than I want to.

Usage

Tailwind CSS (TW) has a build process that generates your final stylesheet (unless you are using the Play CDN). This makes it so that after the build process is done, you have a stylesheet that only contains the CSS that your site uses. To do this, you configure TW to watch for changes to certain files. If those files contain any TW properties, the build process tracks them so it knows which CSS property declarations to include in the resulting stylesheet.

Installation

I generally followed the instructions on the tailwind site but I'll be a little more explicit. Below is the installation command which I ran in my project directory.

(If node_modules isn't already in your .gitignore then you should add it because those aren't necessary for you to keep in your version control.)

Decide where your input.css file and output.css file will go. output.css is the stylesheet that your html pages will link to. input.css is where you can define CSS classes and @apply TW classes under a custom class name. Add this to the top of it.

Now you should be able to run this command in the root of your project directory to generate the output.css. Make sure you update the paths to the files to where your input.css is and where you want your output.css to go.

Workflow