Skip to content

Tailwind CSS

Jump to bottom
Curtis Belt edited this page Apr 8, 2020 · 9 revisions

Used By:

Configuration

Custom Fonts & System Font Stacks

If no fonts are configured, Tailwind provides generic classes: font-sans, font-serif, and font-mono - each configured with system font stacks.

fontFamily: {
  sans: [
    'system-ui',
    '-apple-system',
    'BlinkMacSystemFont',
    '"Segoe UI"',
    'Roboto',
    '"Helvetica Neue"',
    'Arial',
    '"Noto Sans"',
    'sans-serif',
    '"Apple Color Emoji"',
    '"Segoe UI Emoji"',
    '"Segoe UI Symbol"',
    '"Noto Color Emoji"',
  ],
  serif: ['Georgia', 'Cambria', '"Times New Roman"', 'Times', 'serif'],
  mono: ['Menlo', 'Monaco', 'Consolas', '"Liberation Mono"', '"Courier New"', 'monospace'],
}

We want to setup our own custom fonts though, of course. We can use the default system font stacks for our fall back fonts.

fontFamily: {
  'ibm-plex-sans': ['"IBM Plex Sans"', ...theme.fontFamily.sans],
  'ibm-plex-serif': ['"IBM Plex Serif"', ...theme.fontFamily.serif],
  'ibm-plex-mono': ['"IBM Plex Mono"', ...theme.fontFamily.mono],
  'graphik-sans': ['"Graphik XX Cond"', ...theme.fontFamily.sans],
  'para-supreme-serif': [ '"Para Supreme Regular"', ...theme.fontFamily.serif ]
}

This give us the following font utility classes:

  • font-ibm-plex-sans
  • font-ibm-plex-serif
  • font-ibm-plex-mono
  • font-graphik-sans
  • font-para-supreme-serif

Colors

  • TODO: define color naming rules. stick to tailwind default color names and a 100-900 scale.

  • TODO: expand on brand color naming, why it matters. "Colors just want to be themselves" For example, if a brand color is red. You might configure your red-#00 to match and call it good. But think about if your brand color ever change to green. Sure, you can rename all red-#00 to green-#00 but what if you already had green set at a specific hue? And if you used red-500 on a warning dialog, now it's going to be a green warning dialog.

These tools made it easy to setup a custom Tailwind CSS color palettes.

Naming Your Colors

Tailwind uses literal color names (like red, green, etc.) and a numeric scale (where 100 is light and 900 is dark, with 500 being your base color) by default.

Variety Colors

https://javisperez.github.io/tailwindcolorshades/#/?brand-yellow=ffec00&brand-teal=283841&teal=688B8F&blue=417ef4&brand-red=D71440&orange=F47E37&gray=828283&tv=1

Tooling

VSCode: Tailwind CSS Autocomplete

The author is also planning to open source his tailwindcss-language-server soon, and is working on intelligent class sorting (https://discordapp.com/channels/486935104384532500/545695128640028684/648521903836889088).

Classes Sorter

There is a prettier plugin created to sort tailwind classes. It does not yet support Vue but it's listed as a planned feature. If this can be part of linting as well to enforce its use, this could be valuable for improving readability by enforcing consistency, which will form muscle memory transferable to any component regardless of who has worked on it.

Clone this wiki locally