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="m