Here's What I Change on Every New TailwindCSS Project

UPDATE: Ever since TailwindCSS started supporting arbitrary values I no longer need to customize these things. I do always bring my own color pallets and box shadows though. I'll leave the rest of this article alone for posterity.

Every website I design is unique. It absolutely without a doubt must be totally unlike anything I've ever done before. It's kind of a personal rule or challenge.

However, there are techniques I apply to nearly every design. I love bold colors, fresh fonts, and funky, non-uniform layouts. And TailwindCSS. Good heavens do I love Tailwind.

My starter Tailwind config helps me get where I want to go. I always begin by completely wiping out the colors and fonts, and add a whole crap ton of additional sizes and rotation values (because I love organic, sorta messy elements all over the page). I like knowing I can try out almost any reasonable value and not have to bounce around adding or extending the config repeatedly.

So here's my bare-bones starter config file if you want to take a similar approach.

// tailwind.config.js
module.exports = {
    important: true,
    theme: {
      colors: {
        // new every project
        // but there's always a
        // place for hot pink
        'hot-pink': '#fd2d78'
      },
      fontFamily: {
        // new every project
      },
      rotate: {
        '-180': '-180deg',
        '-90': '-90deg',
        '-45': '-45deg',
        '-10': '-10deg',
        '-9': '-9deg',
        '-8': '-8deg',
        '-7': '-7deg',
        '-6': '-6deg',
        '-5': '-5deg',
        '-4': '-4deg',
        '-3': '-3deg',
        '-2': '-2deg',
        '-1': '-1deg',
        '0': '0',
        '1': '1deg',
        '2': '2deg',
        '3': '3deg',
        '4': '4deg',
        '5': '5deg',
        '6': '6deg',
        '7': '7deg',
        '8': '8deg',
        '9': '9deg',
        '10': '10deg',
        '45': '45deg',
        '90': '90deg',
        '180': '180deg',
      },
      spacing: {
        px: '1px',
        '0': '0',
        '1': '0.25rem',
        '2': '0.5rem',
        '3': '0.75rem',
        '4': '1rem',
        '5': '1.25rem',
        '6': '1.5rem',
        '7': '1.75rem',
        '8': '2rem',
        '9': '2.25rem',
        '10': '2.5rem',
        '12': '3rem',
        '14': '3.5rem',
        '16': '4rem',
        '20': '5rem',
        '22': '5.5rem',
        '24': '6rem',
        '26': '6.5rem',
        '28': '7rem',
        '30': '7.5rem',
        '32': '8rem',
        '34': '8.5rem',
        '36': '9rem',
        '38': '9.5rem',
        '40': '10rem',
        '44': '11rem',
        '48': '12rem',
        '52': '13rem',
        '56': '14rem',
        '60': '15rem',
        '64': '16rem',
        '68': '17rem',
        '72': '18rem',
        '76': '19rem',
        '80': '20rem',
        '88': '22rem',
        '96': '24rem',
        '104': '26rem',
        '110': '28rem',
        '118': '30rem',
        '126': '32rem',
        '132': '34rem',
        '140': '36rem',
      },
    }
  }

Published Aug 31, 2020