JSTAcademy
0 XP
Dashboard
Crash Courses
Custom Config & Plugins
11 min
Masters+175 XP
Crash Courses · Masters

Custom Config & Plugins

Extend Tailwind with custom utilities, themes, and plugins for design systems.
11 min read+175 XP on completionCert: Tailwind CSS Crash Course
Tap any word in the text below to start reading from there.

Custom Config & Plugins

tailwind.config.ts is where you define your design system. Custom tokens become utility classes automatically.

Full Config Example

// tailwind.config.ts
import type { Config } from 'tailwindcss'

export default {
  content: ['./src/**/*.{ts,tsx}'],
  darkMode: 'class',
  theme: {
    extend: {
      colors: {
        brand: {
          50: '#fffbeb', 100: '#fef3c7',
          500: '#f59e0b', 600: '#d97706',
          700: '#b45309', 900: '#78350f',
        },
      },
      fontFamily: {
        sans: ['var(--font-inter)', 'system-ui', 'sans-serif'],
        display: ['var(--font-playfair)', 'Georgia', 'serif'],
      },
      borderRadius: {
        '4xl': '2rem',
        '5xl': '2.5rem',
      },
      animation: {
        'fade-in': 'fadeIn 0.3s ease-out',
        'slide-up': 'slideUp 0.4s ease-out',
      },
      keyframes: {
        fadeIn: { from: { opacity: '0' }, to: { opacity: '1' } },
        slideUp: { from: { transform: 'translateY(10px)', opacity: '0' }, to: { transform: 'translateY(0)', opacity: '1' } },
      },
    },
  },
  plugins: [
    require('@tailwindcss/typography'),
    require('@tailwindcss/forms'),
  ],
} satisfies Config

Typography Plugin (Prose)

<article className="prose prose-lg prose-amber dark:prose-invert max-w-none">
  <div dangerouslySetInnerHTML={{ __html: courseContentHtml }} />
</article>

prose-amber colors links and headings with amber. prose-invert for dark mode.

Custom Plugin

const plugin = require('tailwindcss/plugin')

plugins: [
  plugin(function({ addUtilities }) {
    addUtilities({
      '.text-balance': { 'text-wrap': 'balance' },
      '.scrollbar-hide': {
        '-ms-overflow-style': 'none',
        'scrollbar-width': 'none',
        '&::-webkit-scrollbar': { display: 'none' },
      },
    })
  }),
]
0%