The Tailwind CSS Setup I Use on Every Project

I have been using Tailwind CSS for about 2 years now on every project. After a lot of trial and error, I settled on a setup that works well for building client websites and web tools.

Here is exactly what I use and why.

The base config

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

js
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="bg-white dark:bg-neutral-900 border border-neutral-200 
  dark:border-neutral-800 rounded-xl p-6 hover:border-neutral-300 
  dark:hover:border-neutral-700 transition-colors">
  Content here
</div>
Section container
<section class="py-16 md:py-24 px-4">
  <div class="max-w-6xl mx-auto">
    Content here
  </div>
</section>
Responsive text
<h2 class="text-2xl md:text-3xl lg:text-4xl font-bold">
  Heading
</h2>

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

What I do not use
@apply in CSS files
Tailwind has an @apply directive that 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
Things like w-[327px] are a sign that something is wrong with the design. I try to stick to the default spacing and sizing scale. If the design has weird sizes, I round them to the nearest Tailwind value.

Dark mode setup
I use the class strategy for dark mode. This 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 html element and all the dark: variants kick in.

Production checklist
Before shipping any project, I check:

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 it 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-30KB. Compare that to a typical WordPress site with 200-500KB 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 will be surprised how far the defaults get you.