Custom Configuration

Code

// tailwind.config.js
module.exports = {
  content: ["./src/**/*.{html,js,ts,jsx,tsx}"],
  theme: {
    extend: {
      colors: {
        brand: {
          50: "#eef6ff",
          500: "#1976d2",
          700: "#0d47a1"
        }
      },
      fontFamily: {
        sans: ["Inter", "system-ui", "sans-serif"]
      },
      spacing: {
        128: "32rem"
      },
      animation: {
        "fade-in": "fadeIn 0.3s ease-in"
      },
      keyframes: {
        fadeIn: { "0%": { opacity: "0" }, "100%": { opacity: "1" } }
      }
    }
  },
  plugins: []
};

Explanation

The config file customizes Tailwind via theme.extend, which adds to defaults without replacing them. Adding a brand color generates bg-brand-500, text-brand-700, and so on. The content array tells Tailwind which files to scan so it can purge unused utilities in production.

More Tailwind CSS Snippets