Tailwind CSS Base Style

Base style I usually add to headings and body after preflight.

––– views

@tailwind base;
@tailwind components;
@tailwind utilities;
@layer base {
/* inter var - latin */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 100 900;
font-display: optional;
src: url('/fonts/inter-var-latin.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193,
U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Write your own custom base styles here */
h1 {
@apply text-3xl font-bold md:text-5xl font-primary;
}
h2 {
@apply text-2xl font-bold md:text-4xl font-primary;
}
h3 {
@apply text-xl font-bold md:text-3xl font-primary;
}
h4 {
@apply text-lg font-bold font-primary;
}
body {
@apply text-sm font-primary md:text-base;
}
.layout {
/* 750px */
/* max-width: 43.75rem; */
/* 1100px */
max-width: 68.75rem;
@apply w-11/12 mx-auto;
}
}
css

For .layout class explanation, check out my blog post about Tailwind CSS Best Practice

tailwind.config.js

You can add types to config by adding tailwindcss types.

yarn add -D @types/tailwindcss
bash

Here is what I usually add for config. Please notice the purge key, your directory structure might be different than mine.

/* eslint-disable @typescript-eslint/no-var-requires */
const { fontFamily } = require('tailwindcss/defaultTheme');
/** @type {import("@types/tailwindcss/tailwind-config").TailwindConfig } */
module.exports = {
mode: 'jit',
purge: ['./src/**/*.{js,jsx,ts,tsx}'],
darkMode: false, // or 'media' or 'class'
theme: {
extend: {
fontFamily: {
primary: ['Inter', ...fontFamily.sans],
},
colors: {
primary: {
400: '#00E0F3',
500: '#00c4fd',
},
dark: '#222222',
},
keyframes: {
flicker: {
'0%, 19.999%, 22%, 62.999%, 64%, 64.999%, 70%, 100%': {
opacity: 0.99,
filter:
'drop-shadow(0 0 1px rgba(252, 211, 77)) drop-shadow(0 0 15px rgba(245, 158, 11)) drop-shadow(0 0 1px rgba(252, 211, 77))',
},
'20%, 21.999%, 63%, 63.999%, 65%, 69.999%': {
opacity: 0.4,
filter: 'none',
},
},
},
animation: {
flicker: 'flicker 3s linear infinite',
},
},
},
variants: {
extend: {},
},
plugins: [require('@tailwindcss/forms')],
};
js