Try It Yourself - SyntaxStudy Editor

HTML / CSS / JS

// tailwind.config.js — custom plugin examples
const plugin = require('tailwindcss/plugin');

module.exports = {
  content: ['./src/**/*.{html,js,jsx}'],
  theme: {
    extend: {
      textShadow: {
        sm:  '1px 1px 2px rgba(0,0,0,0.2)',
        DEFAULT: '2px 2px 4px rgba(0,0,0,0.3)',
        lg:  '4px 4px 8px rgba(0,0,0,0.4)',
      },
    },
  },
  plugins: [
    // Plugin 1: text-shadow utilities using matchUtilities
    plugin(function ({ matchUtilities, theme }) {
      matchUtilities(
        {
          'text-shadow': (value) => ({
            textShadow: value,
          }),
        },
        { values: theme('textShadow') }
      );
    }),

// Plugin 2: custom hocus: variant (hover + focus combined)
    plugin(function ({ addVariant }) {
      addVariant('hocus', ['&:hover', '&:focus']);
      addVariant('group-hocus', ['.group:hover &', '.group:focus &']);
    }),

// Plugin 3: fluid type utility
    plugin(function ({ addUtilities }) {
      addUtilities({
        '.fluid-h1': {
          fontSize: 'clamp(1.75rem, 4vw + 1rem, 3.5rem)',
          lineHeight: '1.1',
          fontWeight: '800',
        },
        '.fluid-h2': {
          fontSize: 'clamp(1.375rem, 2.5vw + 0.75rem, 2.5rem)',
          lineHeight: '1.2',
          fontWeight: '700',
        },
        '.fluid-body': {
          fontSize: 'clamp(1rem, 0.5vw + 0.875rem, 1.125rem)',
          lineHeight: '1.7',
        },
      });
    }),

// Official plugins
    require('@tailwindcss/forms'),
    require('@tailwindcss/typography'),
    require('@tailwindcss/aspect-ratio'),
  ],
};