Try It Yourself - SyntaxStudy Editor

HTML / CSS / JS

// tailwind.config.js — comprehensive theme extension
const defaultTheme = require('tailwindcss/defaultTheme');

/** @type {import('tailwindcss').Config} */
module.exports = {
  darkMode: 'class',
  content: ['./src/**/*.{html,js,jsx,tsx,vue}'],

theme: {
    extend: {
      // Custom brand color with full shade scale
      colors: {
        brand: {
          50:  '#f0f4ff',
          100: '#dce5fe',
          200: '#b9cafe',
          300: '#93adfd',
          400: '#6d8dfc',
          500: '#4f6ef7',  // primary
          600: '#3a52e8',
          700: '#2d3fcb',
          800: '#2733a4',
          900: '#232e82',
          950: '#151a4e',
        },
        // Simple single-value color (no shades)
        'custom-teal': '#14b8a6',
      },

// Extend font families (prepend to the default stack)
      fontFamily: {
        sans: ['Inter', ...defaultTheme.fontFamily.sans],
        display: ['Cal Sans', 'Inter', ...defaultTheme.fontFamily.sans],
        mono: ['JetBrains Mono', ...defaultTheme.fontFamily.mono],
      },

// Extra spacing values
      spacing: {
        '18': '4.5rem',
        '88': '22rem',
        '128': '32rem',
      },

// Extra border radii
      borderRadius: {
        '4xl': '2rem',
        '5xl': '2.5rem',
      },

// Extra screen breakpoints
      screens: {
        'xs': '475px',
        '3xl': '1920px',
      },

// Custom box shadows
      boxShadow: {
        'card': '0 2px 15px -3px rgba(0,0,0,0.07), 0 10px 20px -2px rgba(0,0,0,0.04)',
        'glow-blue': '0 0 20px rgba(79,110,247,0.4)',
      },
    },
  },

plugins: [],
};