TailwindCSS

Created: 2020-03-30 20:48:01 -0700 Modified: 2023-04-21 19:12:30 -0700

TailwindCSS (reference)

Basics

Responsive design allows you to prefix with “sm:”, “md:”, “lg:”, or “xl:” to only apply the class at a specific breakpoint, e.g. you can control a width to make it smaller on mobile like this: class=“w-16 md:w-32”
- They are mobile-first, meaning that prefixes only override as the screen gets bigger.
- You can “undo” this by redefining the property at a larger breakpoint.
Lots of great components here (more easily visible through their site) to see how to set things up.
It’s highly advised that you search their site (with ”/”) for things like “center container” or “color text”.
These screencasts were recommended to me by multiple people: https://tailwindcss.com/screencasts/
You can handle pseudo classes like “hover:” and “focus:” by simply prefixing with those strings. You can combine this with responsive design with something like “md:hover:“.
Tailwind only detects classes as unbroken strings in your source file (reference), so doing something like text-${color}-700 won’t work since it’s dynamically forming the string. Instead, map the “color” variable to Tailwind classes (e.g. map “blue” → “text-blue-700”, “green” → “text-green-700”).
For customizing fonts, read this. You can set your font family directly in the configuration file (tailwind.config.js).
For brand colors (e.g. Twitch, Patreon, Google, or any major site), use https://brandcolors.net/
Their docs are best used by pressing ”/” and searching for what you want.
There’s a VSCode extension to autocompleting class names: vscode-tailwindcss
- Note: this seems to work best if you put a space after the last value in a class string and then start typing, otherwise you have to hit ctrl+space, and your snippets will show first before the Tailwind autocompletes.
1rem is 16 pixels (it’s actually the root font size of the document). Tailwind’s units are in quarter rems, meaning one Tailwind unit is 4 pixels. There’s a REM converter here.
For applying transforms, you have to combine two classes, e.g. “transform rotate-180”
If you want to apply a style only to the first N-1 children, override the style on “last”, e.g. “border-b last:border-b-0”. Note that for margin and borders specifically, Tailwind has spacing and divides, so the example below shouldn’t be used directly.
- In order to use this, you have to modify your tailwind.config.js to include which variants you want to allow “last:” for, that way you don’t explode your bundle size.

module.exports = {
  variants: {
    margin: ["last"]
  }
};

The “last” goes on the last child, not on the parent:

<span className="text-white">
    <span className="mr-4">Pull requests</span>
    <span className="mr-4">Issues</span>
    <span className="mr-4">Trending</span>
    <span className="mr-4 last:mx-0">Explore</span>
</span>

Minimizing the output CSS size (keyword: PurgeCSS) (reference)

UPDATE (5/8/20): as of Tailwind 1.4, this is now built-in. Read more here and probably ignore the notes below.

Tailwind generates lots of classes by default, and there’s no way you’re going to use every single font color, background color, etc. that they expose for a single site. They suggest using PurgeCSS to automatically remove any unused classes, and if you can’t use that for whatever reason, they suggest turning off features/colors/sizes/etc.

I ran into a bunch of issues when using PurgeCSS that I’ve detailed below:

It was removing all of my custom styles from node_modules. This is because PurgeCSS doesn’t magically know which CSS you’re using (reference). In those cases, you should use the “whitelistPatterns” property (reference). Here are some examples:
- FontAwesome’s patterns: [/^fa-/, /-fa$/]
- react-tippy’s patterns: [/^tippy-/]
- rc-checkbox’s patterns: [/^rc-checkbox/]
Some of my overrides in tailwind.config.js didn’t seem to be getting used. For example, I had this:

module.exports = {
    theme: {
      extend: {
        textColor: {
          twitchPurple: '#6441A5',
        },
      },
    },
  };

This turned out to be a different problem than I thought—it was because I was using the resulting “text-twitchPurple” class from this file:

export const openIdIconInfo = {
    [OpenIdProvider.TWITCH]: {
      iconColor: 'text-twitchPurple',
      icon: ['fab', 'twitch'],
      text: 'Twitch',
    },
};

However, my configuration looked like this:

const purgecss = [
  '@fullhuman/postcss-purgecss',
  {
    content: ['./components/**/*.js', './pages/**/*.js'],
    whitelistPatterns: [/^fa-/, /-fa$/, /^tippy-/, /^rc-checkbox/],
    defaultExtractor: (content) => content.match(/[w-/:]+(?<!:)/g) || [],
  },
];

So, to summarize, the problem was that I was only specifying the “components” and “pages” directories from my postcss.config.js, but I had the CSS in the “misc” folder. To fix this, I added “./misc/*/.js” alongside the other directories.

Despite having fixes to my problems, I think that if anything pops up in the future, an extra ~70 Kb of gzipped CSS isn’t the worst thing in the world, so I would just remove PurgeCSS.

Customizing (reference)

Here’s a sample tailwind.config.js file that I used for my site:

module.exports = {
  theme: {
    extend: {
      width: {
        '22': '5.5rem',
        '80': '20rem',
      },
      fontFamily: {
        sans: ['Roboto'],
      },
      textColor: {
        patreonPeach: '#F96854',
        discordBlue: '#7289DA',
      },
    },
  },
};

This does a few nice things:

Allows me to use w-80 or w-22 to get special sizes.
Makes my default font the Google Font, Roboto.

Note that when you extend “textColor”, it’s only usable as the CSS “color” property. If you want to use the color for borders, backgrounds, etc., then you can extend the generic “colors” property instead. However, that’ll generate more CSS in the end (which PurgeCSS may be able to remove for you).

Usage from NextJS

To use TailwindCSS with NextJS, check out these steps.
- Keep in mind that the CSS must be imported from pages/_app.js, not just any random page!
Rather than following the advice here about extracting common CSS patterns, you should just make React components that wrap this (reference, video from that reference).