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');
const {
  tailwind
} = require('@tesseract-design/viewfinder-base');

const plugin = require('tailwindcss/plugin')

const tesseractPlugin = plugin(
  ({ addUtilities }) => {
    addUtilities({
      '.font-condensed': {
        'font-stretch': 'condensed',
      },
      '.font-semi-condensed': {
        'font-stretch': 'semi-condensed',
      },
      '.font-expanded': {
        'font-stretch': 'expanded',
      },
      '.font-semi-expanded': {
        'font-stretch': 'semi-expanded',
      },
      '.font-inherit': {
        'font-stretch': 'inherit',
      },
      '.linejoin-round': {
        'stroke-linejoin': 'round',
      },
      '.linecap-round': {
        'stroke-linecap': 'round',
      },
    });
  },
  {
    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: {
        'sidebar': 'rgb(var(--color-sidebar)',
        'topbar': 'rgb(var(--color-topbar)',

        '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',
        },
      },
    },
  },
);


/** @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/viewfinder-react/dist/**/*.js',
    './node_modules/@tesseract-design/web-*-react/dist/**/*.js', // catch-all, can use individual packages
  ],
  plugins: [
    tailwind.plugin(),
    tesseractPlugin,
    colorPickerPlugin,
    dateDropdownPlugin,
    dropdownSelectPlugin,
    menuMultiSelectPlugin,
    menuSelectPlugin,
    numberSpinnerPlugin,
    radioButtonPlugin,
    radioTickBoxPlugin,
    sliderPlugin,
    tagInputPlugin,
    timeSpinnerPlugin,
    toggleButtonPlugin,
    toggleSwitchPlugin,
    toggleTickBoxPlugin,
  ],
}