Skip to main content

Tailwind CSS Base Style

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

––– views

@tailwind base; @tailwind components; @tailwind utilities; :root { /* Customize these variable */ /* https://github.com/adamwathan/tailwind-css-variable-text-opacity-demo */ --tw-clr-primary-400: 0, 224, 243; --tw-clr-primary-500: 0, 196, 253; --clr-primary-400: rgb(var(--tw-clr-primary-400)); /* #00e0f3 */ --clr-primary-500: rgb(var(--tw-clr-primary-500)); /* #00c4fd */ } @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; } .cursor-newtab { cursor: url('/images/new-tab.png') 10 10, pointer; } h1 { @apply font-primary text-2xl font-bold md:text-4xl; } h2 { @apply font-primary text-xl font-bold md:text-3xl; } h3 { @apply font-primary text-lg font-bold md:text-2xl; } h4 { @apply font-primary text-base font-bold md:text-lg; } body { @apply font-primary text-sm md:text-base; } .layout { /* 750px */ /* max-width: 43.75rem; */ /* 1100px */ max-width: 68.75rem; @apply mx-auto w-11/12; } .bg-dark a.custom-link { @apply border-gray-200 hover:border-gray-200/0; } /* Class to adjust with sticky footer */ .min-h-main { @apply min-h-[calc(100vh-56px)]; } } @layer utilities { .animated-underline { background-image: linear-gradient(#33333300, #33333300), linear-gradient(to right, var(--clr-primary-400), var(--clr-primary-500)); background-size: 100% 2px, 0 2px; background-position: 100% 100%, 0 100%; background-repeat: no-repeat; transition: 0.3s ease; transition-property: background-size, color, background-color, border-color; } .animated-underline:hover, .animated-underline:focus-visible { background-size: 0 2px, 100% 2px; } }
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'); function withOpacity(variableName) { return ({ opacityValue }) => { if (opacityValue !== undefined) { return `rgba(var(${variableName}), ${opacityValue})`; } return `rgb(var(${variableName}))`; }; } /** @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: { // Customize it on globals.css :root 400: withOpacity('--tw-clr-primary-400'), 500: withOpacity('--tw-clr-primary-500'), }, 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