@tpzdsp/eslint-config-dsp/tailwindcss/index.js

re-usable config for ESLint, Prettier and semantic-release

import plugin from 'tailwindcss/plugin';

import { COLORS } from './colors';
import { FONT_SIZES, RESPONSIVE_TEXT_PLUGIN } from './typography';

export { COLORS } from './colors';

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    './src/pages/**/*.{js,ts,jsx,tsx,mdx}',
    './src/components/**/*.{js,ts,jsx,tsx,mdx}',
    './src/app/**/*.{js,ts,jsx,tsx,mdx}',
  ],
  theme: {
    fontSize: {
      // `static` means the font size will not be responsive,
      // unlike the `text-...` versions
      'static-lg-5xl': FONT_SIZES['5xl'].sm,
      'static-lg-4xl': FONT_SIZES['4xl'].sm,
      'static-lg-3xl': FONT_SIZES['3xl'].sm,
      'static-lg-2xl': FONT_SIZES['2xl'].sm,
      'static-lg-xl': FONT_SIZES['xl'].sm,
      'static-lg-lg': FONT_SIZES['lg'].sm,
      'static-lg-base': FONT_SIZES['base'].sm,
      'static-5xl': FONT_SIZES['5xl'].base,
      'static-4xl': FONT_SIZES['4xl'].base,
      'static-3xl': FONT_SIZES['3xl'].base,
      'static-2xl': FONT_SIZES['2xl'].base,
      'static-xl': FONT_SIZES['xl'].base,
      'static-lg': FONT_SIZES['lg'].base,
      'static-base': FONT_SIZES['base'].base,
    },
    lineHeight: {},
    screens: {
      '2xs': '20em', // 320px
      xs: '36.26rem', // 580px
      sm: '46.25em', // 740px
      md: '61.25em', // 980px
      lg: '81.25em', //1300px
    },
    extend: {
      borderWidth: {
        form: '2px',
      },
      fontFamily: {
        sans: ['var(--font-gds-transport)', 'Arial', 'sans-serif'], // Use the GDS Transport font if available (if defined in the CSS variable)
        widgetFont: ['Helvetica', 'Arial', 'Sans-serif'],
      },
      colors: {
        ...COLORS,
        'text-primary': COLORS.black,
        'text-secondary': COLORS.gray['500'],
        focus: COLORS.yellow['500'],
        'focus-text': COLORS.black,
        error: COLORS.red['500'],
        warning: COLORS.orange['500'],
        success: COLORS.green['500'],
        brand: COLORS.green['500'],
        link: COLORS.green['500'],
        'link-hover': COLORS.green['600'],
        'link-visited': COLORS.purple['500'],
        'link-active': COLORS.black,
        border: COLORS.slate['500'],
        'border-input': COLORS.black,
      },
      spacing: {
        0: '0px',
        1: '5px',
        2: '10px',
        3: '15px',
        4: '20px',
        5: '25px',
        6: '30px',
      },

      container: {
        center: true,
        padding: {
          DEFAULT: '1rem',
          sm: '1rem',
          md: '2rem',
        },
        screens: {
          sm: '100%',
          md: '40em', // 640px
          lg: '48em', // 768px,
          xl: '64em', // 1024px,
        },
      },
    },
  },
  plugins: [
    // add some helpful utility variants
    plugin(({ addVariant }) => {
      addVariant('focus-idle', '&:focus:not(:hover):not(:active)');
      addVariant('hover-enabled', '&:hover:enabled');
      addVariant('active-enabled', '&:active:enabled');
    }),
    RESPONSIVE_TEXT_PLUGIN,
  ],
};