내가 모든 프로젝트에 사용하는 Tailwind CSS 설정

Source: Dev.to

The base config

My tailwind.config.js is pretty minimal. I extend the default theme instead of overriding it.

module.exports = {
  content: ["./src/**/*.{js,jsx}"],
  theme: {
    extend: {
      colors: {
        brand: "#e3eb01",
      },
      fontFamily: {
        sans: ["Inter", "system-ui", "sans-serif"],
      },
    },
  },
  plugins: [],
};

I add one or two brand colors and a custom font. Everything else stays default. Tailwind defaults are well designed and I rarely need to change them.

Utility patterns I reuse

Card component

<div class="card">
  Content here
</div>

Section container

<section class="container">
  Content here
</section>

Responsive text

<h1 class="text-2xl md:text-4xl">
  Heading
</h1>

These three patterns cover probably 80 % of what I build.

What I do not use

@apply in CSS files

Tailwind’s @apply directive lets you extract utility classes into CSS classes. I used it heavily at first but stopped—it defeats the purpose of utility‑first CSS. If I need a reusable style, I make a React component instead.

Tailwind plugins

I have tried several Tailwind plugins and always ended up removing them. The default utilities cover everything I need. If I need custom styles, I write them in plain CSS.

Arbitrary values

Values like w-[327px] are a sign that something is wrong with the design. I try to stick to the default spacing and sizing scale. When a design has odd sizes, I round them to the nearest Tailwind value.

Dark mode setup

I use the class strategy for dark mode, which lets me toggle dark mode with JavaScript instead of relying on the OS setting.

// tailwind.config.js
module.exports = {
  darkMode: "class",
  // …
};

Then I just add the dark class to the “ element and all the dark: variants kick in.

Production checklist

• All text is readable on both light and dark backgrounds.
• No horizontal scroll on mobile.
• All hover states work and look intentional.
• The brand color is not overused (just CTAs and accents).
• Loading states do not flash unstyled content.

Tailwind with Next.js

Tailwind and Next.js work really well together. Install Tailwind during project setup and it just works. The purge step removes unused classes at build time, so the final CSS is tiny.

Our production CSS files are usually 15–30 KB. Compare that to a typical WordPress site with 200–500 KB of CSS, and you can see why our sites load faster.

---

This is the setup I use for everything at Impeccify. If you are starting with Tailwind, keep it simple. Learn the default utilities first before adding custom config—you’ll be surprised how far the defaults get you.