tailwind.config.ts

import type { Config } from 'tailwindcss';
import * as defaultTheme from 'tailwindcss/defaultTheme';
import typography from '@tailwindcss/typography';
import daisyui from 'daisyui';
import daisyTheme from 'daisyui/src/theming/themes';
import { tailwindColors } from './src/config/colors';
import { addDynamicIconSelectors } from '@iconify/tailwind';

export default {
  content: ['./index.html', 'src/**/*.{js,ts,jsx,tsx,mdx}', '../../libs/*/lib/**/*.{js,ts,jsx,tsx,mdx}'],
  theme: {
    borderRadius: {
      none: 0,
      sm: '0.125rem',
      DEFAULT: '0.25rem',
      md: '0.375rem',
      lg: '0.5rem',
      xl: '0.75rem',
      '2xl': '1rem',
      '3xl': '1.5rem',
      full: '9999px',
    },
    fontSize: {
      '3xs': '0.625rem',
      '2xs': '0.688rem',
      xs: '0.75rem',
      sm: '0.875rem',
      base: '1rem',
      lg: '1.125rem',
      xl: '1.25rem',
      '2xl': '1.5rem',
      '3xl': '1.875rem',
      '4xl': '2.25rem',
      '5xl': '3rem',
      '6xl': '3.75rem',
      '7xl': '4.5rem',
      '8xl': '6rem',
    },
    fontFamily: {
      sans: ['Inter', ...defaultTheme.fontFamily.sans],
      mono: ['Roboto Mono', ...defaultTheme.fontFamily.mono],
    },
    extend: {
      borderColor: {
        DEFAULT: 'hsl(var(--clr-sec--200) / <alpha-value>)',
      },
      colors: tailwindColors,
      animation: {
        openmenu: 'openmenu 0.3s ease-out',
        closemenu: 'closemenu 0.3s ease-out',
      },
      keyframes: {
        openmenu: {
          '0%': { opacity: '0' },
          '100%': { opacity: '1' },
        },
        closemenu: {
          '0%': { opacity: '1' },
          '100%': { opacity: '0' },
        },
      },
    },
  },
  plugins: [typography, daisyui, addDynamicIconSelectors({ scale: 0 })],
  // daisyUI config (optional - here are the default values)
  daisyui: {
    themes: [
      {
        graphpolarisWhite: {
          ...(daisyTheme as Record<string, Record<string, string>>)['[data-theme=corporate]'],
          fontFamily: 'inter,ubuntu,courier,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace',
          primary: '#112646',
          secondary: '#B0B8C2',
          accent: '#FF7D00',
          neutral: '#1c1917',
          'base-100': '#F7F9FA',
          // 'base-200': '#F9FBFC',
          info: '#99622E',
          success: '#35a06a',
          warning: '#eab308',
          error: '#dc2626',

          // "--rounded-box": "0rem", // border radius rounded-box utility class, used in card and other large boxes
          // "--rounded-btn": "0.5rem", // border radius rounded-btn utility class, used in buttons and similar element
          // "--rounded-badge": "1.9rem", // border radius rounded-badge utility class, used in badges and similar
          // "--animation-btn": "0.25s", // duration of animation when you click on button
          // "--animation-input": "0.2s", // duration of animation for inputs like checkbox, toggle, radio, etc
          // "--btn-text-case": "uppercase", // set default text transform for buttons
          // "--btn-focus-scale": "0.95", // scale transform of button when you focus on it
          // "--border-btn": "1px", // border width of buttons
          // "--tab-border": "1px", // border width of tabs
          // "--tab-radius": "0.5rem", // border radius of tabs
        },
      },
      'dark',
      'corporate',
    ], // true: all themes | false: only light + dark | array: specific themes like this ["light", "dark", "cupcake"]
    darkTheme: false, // disabled for now
    // darkTheme: 'dark', // name of one of the included themes for dark mode
    base: false, // applies background color and foreground color for root element by default
    styled: true, // include daisyUI colors and design decisions for all components
    utils: true, // adds responsive and modifier utility classes
    rtl: false, // rotate style direction from left-to-right to right-to-left. You also need to add dir="rtl" to your html tag and install `tailwindcss-flip` plugin for Tailwind CSS.
    prefix: '', // prefix for daisyUI classnames (components, modifiers and responsive class names. Not colors)
    logs: false, // Shows info about daisyUI version and used config in the console when building your CSS
  },
};