PasteBarApp/tailwind.config.js

/** @type {import('tailwindcss').Config} */
import twSafelistGenerator from './scripts/twSafelistGenerator'

const tailwindSafelist = './tailwind-safelist.txt'

// colors.indigo
const SAFELIST_COLORS = [
  'colors.slate',
  'colors.sky',
  'colors.zinc',
  'colors.fuchsia',
  'colors.neutral',
  'colors.stone',
  'colors.red',
  'colors.gray',
  'colors.teal',
  'colors.stone',
  'colors.indigo',
  'colors.green',
  'colors.yellow',
  'colors.blue',
  'colors.purple',
  'colors.pink',
  'colors.rose',
  'colors.orange',
  'colors.lime',
  'colors.emerald',
  'colors.amber',
  'colors.cyan',
  'colors.violet',
]

const SAFELIST_COLORS_PATTERNS = SAFELIST_COLORS.map(color => [
  `bg-{${color}}`,
  `text-{${color}}`,
  `dark:text-{${color}}`,
  `hover:bg-{${color}}`,
  `border-l-{${color}}`,
  `border-{${color}}`,
  `hover:border-{${color}}`,
  `hover:border-l-{${color}}`,
  `dark:border-{${color}}`,
  `dark:border-l-{${color}}`,
  `dark:bg-{${color}}`,
  `dark:border-{${color}}`,
  `dark:hover:bg-{${color}}`,
  `dark:active:bg-{${color}}`,
  `dark:text-{${color}}`,
  `dark:data-[state=active]:bg-{${color}}`,
  `data-[state=active]:bg-{${color}}`,
  `dark:bg-opacity-80`,
  `dark:border-opacity-40`,
  `dark:border-opacity-70`,
  `dark:bg-opacity-70`,
  `dark:border-opacity-50`,
  `dark:border-opacity-60`,
  `bg-opacity-70`,
  `bg-opacity-80`,
  `border-opacity-50`,
  `border-opacity-60`,
  `border-opacity-40`,
  `border-opacity-70`,
  `border-[0px]`,
  `border-[0]`,
  `border-[1px]`,
  `border-[2px]`,
  `border-[3px]`,
  `border-l-[0]`,
  `border-l-[0px]`,
  `border-l-[1px]`,
  `border-l-[2px]`,
  `border-l-[3px]`,
  `border-l-[4px]`,
  `border-l-[5px]`,
  'ml-[10px]',
  'ml-[20px]',
  'ml-[30px]',
  'ml-[40px]',
  'ml-[50px]',
  'ml-[60px]',
  'ml-[90px]',
  'ml-[120px]',
  'ml-[150px]',
  'max-w-min',
  'max-w-xs',
  'max-w-sm',
  'max-w-md',
  'max-w-[50%]',
  'max-w-prose',
  'max-w-full',
  'max-w-max',
  'max-w-fit',
]).flat()

module.exports = {
  darkMode: ['class'],
  content: [
    './packages/pastebar-frontend/index.html',
    './tailwind-safelist.txt',
    './packages/pastebar-frontend/src/**/*.{js,ts,jsx,tsx}',
    './packages/pastebar-frontend/src/components/**/*.{js,ts,jsx,tsx}',
  ],
  theme: {
    container: {
      center: true,
      padding: '2rem',
      screens: {
        '2xl': '1400px',
      },
    },
    extend: {
      listStyleImage: {
        checkmark:
          "url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E\")",
      },
      boxShadow: {
        window: '1px 2px 3px 0 rgb(0 0 0 / 0.1), 0 2px 4px -1px rgb(0 0 0 / 0.1)',
      },
      zIndex: {
        100: '100',
      },
      transitionProperty: {
        // height: 'height',
        height: 'max-height',
      },
      colors: {
        grey: {
          0: '#FFFFFF',
          5: '#F9FAFB',
          10: '#F3F4F6',
          20: '#E5E7EB',
          30: '#D1D5DB',
          40: '#9CA3AF',
          50: '#6B7280',
          60: '#4B5563',
          70: '#374151',
          80: '#1F2937',
          90: '#111827',
        },
        border: 'hsl(var(--border))',
        input: 'hsl(var(--input))',
        ring: 'hsl(var(--ring))',
        background: 'hsl(var(--background))',
        foreground: 'hsl(var(--foreground))',
        primary: {
          DEFAULT: 'hsl(var(--primary))',
          foreground: 'hsl(var(--primary-foreground))',
        },
        secondary: {
          DEFAULT: 'hsl(var(--secondary))',
          foreground: 'hsl(var(--secondary-foreground))',
        },
        destructive: {
          DEFAULT: 'hsl(var(--destructive))',
          foreground: 'hsl(var(--destructive-foreground))',
        },
        muted: {
          DEFAULT: 'hsl(var(--muted))',
          foreground: 'hsl(var(--muted-foreground))',
        },
        accent: {
          DEFAULT: 'hsl(var(--accent))',
          foreground: 'hsl(var(--accent-foreground))',
        },
        popover: {
          DEFAULT: 'hsl(var(--popover))',
          foreground: 'hsl(var(--popover-foreground))',
        },
        card: {
          DEFAULT: 'hsl(var(--card))',
          foreground: 'hsl(var(--card-foreground))',
        },
        'blue-grey': '#607d8b',
        'blue-grey-50': '#eceff1',
        'blue-grey-100': '#cfd8dc',
        'blue-grey-200': '#b0bec5',
        'blue-grey-300': '#90a4ae',
        'blue-grey-200': '#b0bec5',
        'blue-grey-300': '#90a4ae',
        'blue-grey-400': '#78909c',
        'blue-grey-500': '#607d8b',
        'blue-grey-600': '#546e7a',
        'blue-grey-700': '#455a64',
        'blue-grey-800': '#37474f',
        'blue-grey-900': '#263238',
      },
      borderRadius: {
        lg: `var(--radius)`,
        md: `calc(var(--radius) - 2px)`,
        sm: 'calc(var(--radius) - 4px)',
      },
      fontFamily: {
        sans: ['Inter'],
      },
      keyframes: {
        'accordion-down': {
          from: { height: 0 },
          to: { height: 'var(--radix-accordion-content-height)' },
        },
        'accordion-up': {
          from: { height: 'var(--radix-accordion-content-height)' },
          to: { height: 0 },
        },
      },
      animation: {
        'accordion-down': 'accordion-down 0.2s ease-in-out',
        'accordion-up': 'accordion-up 0.2s ease-in-out',
      },
    },
  },
  plugins: [
    require('tailwindcss-animate'),
    twSafelistGenerator({
      path: tailwindSafelist,
      patterns: [...SAFELIST_COLORS_PATTERNS, `h-{height}`, `w-{width}`],
    }),
    require('tailwind-scrollbar')({ nocompatible: true }),
  ],
}