Upgrade Your Styling With Tailwind CSS

Styling Is Very Important for Full-Stack Developers

In full-stack development, I’ve found styling often gets the least attention. This is a shame and has doomed many great apps to obscurity. The style of your app will be everyone’s first impression! It is very important! This is especially true when you are building out a portfolio for job hunting.

Your apps could function perfectly with amazing features, but with weak styling, your average user will never find out about them because they will be bored and leave.

Your styling doesn’t need to be great! Leave that to professional designers. It just needs to be not bad.

As a full-stack developer, aim for good styling.

Why Use Tailwind?

CSS is the language that web-based styling is composed in.

Writing raw CSS is psychotic. You may think it’s fun on FreeCodeCamp, but in the context of a full application, you’ll find yourself maintaining thousands of lines of code and worse, hundreds of uniquely named classes.

The most popular framework for CSS is Bootstrap. Bootstrap is great if you want every button on your website to look like you stole it from Twitter dot com.

It’s a victim of its own success. Every website designed in the last decade uses bootstrap, and they all look the same. Default settings are difficult to change and people are lazy.

So here’s the pitch for Tailwind CSS direct from their website:

Tailwind CSS is 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.

Sounds great! I’ll get over my distrust of things bespoke.

In my short experience with Tailwind, I have found it to be the most intuitive, beautiful, quick, and easily customizable option for styling that I’ve ever used.

Tailwind Utilities

The other thing you will hear about Tailwind is that it is utility-first.

A utility is a built-in, pre-named class. Once you have configured Tailwind (see below), you can simply insert these class names directly into your html.

When I heard that Tailwind came with thousands of pre-named classes, I was already sold. I hate coming up with class names. It’s like how Obama made someone else choose his suit color, “I have too many other decisions to make.”

The syntax is as simple as naming classes.

<p class="text-xl text-gray-600 leading-normal">You have a new message!</p>

Check out some of the detailed examples in the Tailwind docs such as this one for creating cards. I recommend copying the entire example over, which is intentionally complex, and using the Tailwind CSS Intellisense hover feature to identify the CSS used in the example utilities. This will build your intuition for utility names.

Customizing Tailwind

The fact is, Tailwind utilities break down styling to a low enough level that you may not find the need to ever customize them. But you totally could, and it’s easy to do so. It just requires editing the tailwind.config.js file which should be in your project root directory (see below). This is also where you could define color schemes and other project level design schemas.

styles.css

You probably won’t find yourself writing much CSS when you first start using Tailwind, but you still need a styles.css file. Make sure you include these directives or nothing will work. And that’s it as far as bare CSS!

@tailwind base;

@tailwind components;

@tailwind utilities;

Also, make sure you import this file into the front-end index file. I had an index.jsx file in my client/src directory that rendered the React app. This is a good place for the following line of code. Make sure your file path matches the location of your styles.css file.

import './styles/styles.css';

Dev Dependencies

One of the more difficult aspects of transitioning to Tailwind was configuring all of the additional dependencies. My project incorporated a React front-end and a Webpack build. A lot of the following information will probably be helpful for other types of configurations as well, but keep that in mind in case your stack differs from mine.

This command will install required dev dependencies:

npm i -D tailwindcss autoprefixer css-loader postcss-loader postcss-cli style-loader

Make sure to install the Tailwind CSS Intellisense extension. When you hover over an existing Tailwind utility, it will show you the equivalent CSS which is great for getting the hang of new utilities. When writing new utilities, it provides helpful auto-complete suggestions.

PostCSS Configuration

Tailwind makes use of PostCSS. All I needed was the following postcss.config.js in my root directory.

module.exports = {
  plugins: [
    require('tailwindcss'),
    require('autoprefixer'),
  ],
};

Then I added the following rule to my webpack.config.js file. Keep in mind, I trimmed out unrelated Webpack configuration details.

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'style-loader',
          'css-loader',
          'postcss-loader',
        ],
      },
    ],
  },
};

Purging Unused Utilities for Production Build

It is absolutely necessary to purge any unused classes when you build for production. There are thousands of utilities provided by Tailwind which results in a huge build if they’re not purged.

Purging is handled in the tailwind.config.js file which should live in your project’s root directory. Any file included in the purge array will be searched for utilities. My tailwind.config.js looked like this on a recent react project:

module.exports = {
  purge: [
    './client/src/*.jsx',
    './client/src/**/*.jsx',
  ],
  theme: {},
  variants: {},
  plugins: [],
};

Any utilities that are found will not be purged. This means you can’t do anything goofy with the provided class names. Use whole class names only.

// don’t do this
<div className={‘text-’ + error ? ‘red’ : ‘green’ + ‘-600’}></div>

Conclusion

If you’re looking for a way to freshen up your web styling, give Tailwind a try! I found it to be very beautiful, intuitive, and quick once everything was configured properly. Hopefully this post will help you get up and running with Tailwind.