Generator

Tailwind Config Generator

tailwind.config.js (v3) or the CSS-first @theme block (v4) with brand colors, dark mode strategy, and common plugins.

Tailwind v4 (CSS-first)

Primary color

Accent color

Font family

Dark mode

container utility

@tailwindcss/typography

@tailwindcss/forms

@tailwindcss/aspect-ratio

tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./app/**/*.{js,ts,jsx,tsx,mdx}",
    "./components/**/*.{js,ts,jsx,tsx,mdx}",
    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
  ],
  darkMode: "class",
  theme: {
    container: { center: true, padding: "1rem", screens: { "2xl": "1400px" } },
    extend: {
      colors: {
        primary: "#4f46e5",
        accent: "#ec4899",
      },
      fontFamily: {
        sans: [["Inter","sans-serif"].flat()],
      },
    },
  },
  plugins: [require("@tailwindcss/typography")],
};