tesseract/showcases/web-kitchensink-reactnext/tailwind.config.js

const defaultTheme = require('tailwindcss/defaultTheme')
const {
  dropdownSelectPlugin,
  menuSelectPlugin,
  radioButtonPlugin,
  radioTickBoxPlugin,
} = require('@tesseract-design/web-choice-react');
const {
  colorPickerPlugin,
} = require('@tesseract-design/web-color-react');
const {
  menuMultiSelectPlugin,
  tagInputPlugin,
  toggleButtonPlugin,
  toggleSwitchPlugin,
  toggleTickBoxPlugin,
} = require('@tesseract-design/web-multichoice-react');
const {
  numberSpinnerPlugin,
  sliderPlugin,
} = require('@tesseract-design/web-number-react');
const {
  dateDropdownPlugin,
  timeSpinnerPlugin,
} = require('@tesseract-design/web-temporal-react');

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './src/pages/**/*.{js,ts,jsx,tsx,mdx}',
    './src/components/**/*.{js,ts,jsx,tsx,mdx}',
    './src/categories/**/*.{js,ts,jsx,tsx,mdx}',
    './node_modules/@tesseract-design/web-*-react/dist/**/*.js', // catch-all, can use individual packages
  ],
  theme: {
    fontFamily: {
      sans: ['var(--font-sans)', ...defaultTheme.fontFamily.sans],
      headings: ['var(--font-headings)', ...defaultTheme.fontFamily.sans],
      mono: ['var(--font-mono)', ...defaultTheme.fontFamily.mono],
      inherit: ['inherit'],
    },
    colors: {
      'shade': 'rgb(var(--color-shade))',
      'negative': 'rgb(var(--color-negative))',
      'positive': 'rgb(var(--color-positive))',
      'primary': 'rgb(var(--color-primary))',
      'secondary': 'rgb(var(--color-secondary))',
      'tertiary': 'rgb(var(--color-tertiary))',
      'code-number': 'rgb(var(--color-code-number))',
      'code-keyword': 'rgb(var(--color-code-keyword))',
      'code-type': 'rgb(var(--color-code-type))',
      'code-instance-attribute': 'rgb(var(--color-code-instance-attribute))',
      'code-function': 'rgb(var(--color-code-function))',
      'code-parameter': 'rgb(var(--color-code-parameter))',
      'code-property': 'rgb(var(--color-code-property))',
      'code-string': 'rgb(var(--color-code-string))',
      'code-variable': 'rgb(var(--color-code-variable))',
      'code-regexp': 'rgb(var(--color-code-regexp))',
      'code-url': 'rgb(var(--color-code-url))',
      'code-global': 'rgb(var(--color-code-global))',
      'current': 'currentcolor',
      'inherit': 'inherit',
      'transparent': 'transparent',
    },
    extend: {
      fontSize: {
        'lg': '1.125em',
        'xl': '1.25em',
        '2xl': '1.5em',
        '3xl': '1.75em',
        '4xl': '2em',
        '5xl': '3em',
        '6xl': '4em',
        'xxs': '0.625rem',
      },
      borderRadius: {
        inherit: 'inherit',
      },
      minWidth: {
        6: '1.5rem',
        10: '2.5rem',
        12: '3rem',
        16: '4rem',
        48: '12rem',
        64: '16rem',
      },
      minHeight: {
        6: '1.5rem',
        10: '2.5rem',
        12: '3rem',
        16: '4rem',
        64: '16rem',
      },
      strokeWidth: {
        3: '3',
      },
    },
  },
  plugins: [
    colorPickerPlugin,
    dateDropdownPlugin,
    dropdownSelectPlugin,
    menuMultiSelectPlugin,
    menuSelectPlugin,
    numberSpinnerPlugin,
    radioButtonPlugin,
    radioTickBoxPlugin,
    sliderPlugin,
    tagInputPlugin,
    timeSpinnerPlugin,
    toggleButtonPlugin,
    toggleSwitchPlugin,
    toggleTickBoxPlugin,
  ],
}