rab.al » Tailwind CSS Base Style

@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;
  }
}

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

tailwind.config.js

You can add types to config by adding tailwindcss types.

yarn add -D @types/tailwindcss

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')],
};