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