diff --git a/app/old_tailwind.config.js b/app/old_tailwind.config.js
deleted file mode 100644
index 6e1d62f680..0000000000
--- a/app/old_tailwind.config.js
+++ /dev/null
@@ -1,1035 +0,0 @@
-/* eslint-disable @typescript-eslint/no-var-requires */
-const forms = require('@tailwindcss/forms')({
- strategy: 'class',
-});
-const colors = require('tailwindcss/colors');
-
-const SCREENS = require('./utils/media');
-
-/**
- * @type {import('tailwindcss').Config}
- */
-module.exports = {
- content: ['./components/**/*.@(tsx|ts)', './layout/**/*.@(tsx|ts)', './pages/**/*.tsx'],
- presets: [],
- theme: {
- extend: {
- outline: {
- blue: '2px dotted #00ace6',
- },
- },
- forms: (theme) => ({
- default: {
- checkbox: {
- borderRadius: 'rounded-sm',
- },
- },
- dark: {
- checkbox: {
- icon: (iconColor) =>
- ``,
- iconColor: theme('colors.gray.800'),
- },
- radio: {
- icon: (iconColor) =>
- `icon: ''`,
- iconColor: theme('colors.gray.800'),
- },
- },
- }),
- screens: Object.keys(SCREENS).reduce((acc, k) => {
- const SCREEN_TEXT = `${SCREENS[k]}px`;
- return {
- ...acc,
- [k]: SCREEN_TEXT,
- };
- }, {}),
- colors: {
- border: 'hsl(var(--border))',
- transparent: 'transparent',
- current: 'currentColor',
- primary: {
- 50: '#F1F9FE',
- 200: '#4dd2ff',
- 300: '#33ccff',
- 400: '#1ac5ff',
- 500: '#00BFFF',
- 600: '#00ace6',
- 700: '#0099cc',
- 800: '#0086b3',
- },
- black: colors.black,
- white: colors.white,
- gray: {
- 50: '#F2F2F2',
- 100: '#E8E8E8',
- 200: '#C4C4C4',
- 300: '#A2A2A9',
- 400: '#5F646E',
- 500: '#36373E',
- 600: '#37393d',
- 700: '#151515',
- 800: '#111111',
- },
- red: {
- 50: '#FFBFB7',
- 100: '#FFAFA4',
- 200: '#FF9D90',
- 300: '#FF7E6C',
- 400: '#FF6D59',
- 500: '#F25C47',
- 600: '#FF472E',
- 700: '#CF2A14',
- 800: '#C21701',
- },
- yellow: {
- 50: '#FFE39D',
- 100: '#FFDD8D',
- 200: '#FFD780',
- 300: '#FFCA42',
- 400: '#FFC453',
- 500: '#FDB944',
- 600: '#FBAD35',
- 700: '#F79618',
- 800: '#F38401',
- },
- green: {
- 50: '#B1FEF7',
- 100: '#8CF9EF',
- 200: '#66F4E7',
- 300: '#03E7D1',
- 400: '#03E4CE',
- 500: '#03D6C2',
- 600: '#02BBA9',
- 700: '#02AD9D',
- 800: '#029F90',
- },
- blue: {
- 50: '#BFF0FF',
- 100: '#99E6FF',
- 200: '#6DDBFF',
- 300: '#1EC7FF',
- 400: '#00BFFF',
- 500: '#01ADF1',
- 600: '#3787FF',
- 700: '#1B72F5',
- 800: '#015EEB',
- },
- purple: {
- 50: '#E3CEFF',
- 100: '#D8BAFF',
- 200: '#CEA8FF',
- 300: '#C496FF',
- 400: '#AE72FF',
- 500: '#9962FD',
- 600: '#8451FC',
- 700: '#674BFD',
- 800: '#401EF8',
- },
- pink: {
- 50: '#FFDDF6',
- 100: '#FFBAEC',
- 200: '#FF9AE4',
- 300: '#FF7CDB',
- 400: '#FF3DCA',
- 500: '#F531B3',
- 600: '#EB269D',
- 700: '#E11A87',
- 800: '#BC0166',
- },
- },
- spacing: {
- px: '1px',
- 0: '0px',
- 0.5: '0.125rem',
- 1: '0.25rem',
- 1.5: '0.375rem',
- 2: '0.5rem',
- 2.5: '0.625rem',
- 3: '0.75rem',
- 3.5: '0.875rem',
- 4: '1rem',
- 4.5: '1.125rem',
- 5: '1.25rem',
- 6: '1.5rem',
- 7: '1.75rem',
- 8: '2rem',
- 9: '2.25rem',
- 10: '2.5rem',
- 11: '2.75rem',
- 12: '3rem',
- 14: '3.5rem',
- 16: '4rem',
- 18: '4.5rem',
- 20: '5rem',
- 24: '6rem',
- 26: '6.5rem',
- 28: '7rem',
- 32: '8rem',
- 36: '9rem',
- 40: '10rem',
- 44: '11rem',
- 48: '12rem',
- 52: '13rem',
- 56: '14rem',
- 60: '15rem',
- 64: '16rem',
- 72: '18rem',
- 80: '20rem',
- 96: '24rem',
- },
- animation: {
- none: 'none',
- spin: 'spin 1s linear infinite',
- ping: 'ping 1s cubic-bezier(0, 0, 0.2, 1) infinite',
- pulse: 'pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite',
- bounce: 'bounce 0.75s infinite',
- banner: 'banner 6s cubic-bezier(0, 0, 0.2, 1) infinite',
- },
- backgroundColor: (theme) => theme('colors'),
- backgroundImage: {
- none: 'none',
- 'gradient-to-t': 'linear-gradient(to top, var(--tw-gradient-stops))',
- 'gradient-to-tr': 'linear-gradient(to top right, var(--tw-gradient-stops))',
- 'gradient-to-r': 'linear-gradient(to right, var(--tw-gradient-stops))',
- 'gradient-to-br': 'linear-gradient(to bottom right, var(--tw-gradient-stops))',
- 'gradient-to-b': 'linear-gradient(to bottom, var(--tw-gradient-stops))',
- 'gradient-to-bl': 'linear-gradient(to bottom left, var(--tw-gradient-stops))',
- 'gradient-to-l': 'linear-gradient(to left, var(--tw-gradient-stops))',
- 'gradient-to-tl': 'linear-gradient(to top left, var(--tw-gradient-stops))',
- // Repeating linear gradients
- // Notice `-45deg` is not the same as `to bottom right`
- 'gradient-repeat-to-br': 'repeating-linear-gradient(-45deg, var(--tw-gradient-stops))',
- },
- backgroundOpacity: (theme) => theme('opacity'),
- backgroundPosition: {
- bottom: 'bottom',
- center: 'center',
- left: 'left',
- 'left-bottom': 'left bottom',
- 'left-top': 'left top',
- right: 'right',
- 'right-bottom': 'right bottom',
- 'right-top': 'right top',
- top: 'top',
- },
- backgroundSize: {
- auto: 'auto',
- cover: 'cover',
- contain: 'contain',
- },
- borderColor: (theme) => ({
- ...theme('colors'),
- DEFAULT: theme('colors.gray.200', 'currentColor'),
- }),
- borderOpacity: (theme) => theme('opacity'),
- borderRadius: {
- none: '0px',
- sm: '0.125rem',
- DEFAULT: '0.25rem',
- md: '0.375rem',
- lg: '0.5rem',
- xl: '0.75rem',
- '2xl': '1rem',
- '3xl': '1.5rem',
- '4xl': '40px',
- full: '9999px',
- },
- borderWidth: {
- DEFAULT: '1px',
- 0: '0px',
- 2: '2px',
- 4: '4px',
- 8: '8px',
- },
- boxShadow: {
- sm: '0 1px 2px 0 rgba(0, 0, 0, 0.05)',
- DEFAULT: '0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)',
- md: '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)',
- lg: '0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)',
- xl: '0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)',
- '2xl': '0 25px 50px -12px rgba(0, 0, 0, 0.25)',
- inner: 'inset 0 2px 4px 0 rgba(0, 0, 0, 0.06)',
- none: 'none',
- },
- container: {},
- cursor: {
- auto: 'auto',
- default: 'default',
- pointer: 'pointer',
- wait: 'wait',
- text: 'text',
- move: 'move',
- 'not-allowed': 'not-allowed',
- },
- divideColor: (theme) => theme('borderColor'),
- divideOpacity: (theme) => theme('borderOpacity'),
- divideWidth: (theme) => theme('borderWidth'),
- fill: { current: 'currentColor' },
- flex: {
- 1: '1 1 0%',
- auto: '1 1 auto',
- initial: '0 1 auto',
- none: 'none',
- },
- flexGrow: {
- 0: '0',
- DEFAULT: '1',
- },
- flexShrink: {
- 0: '0',
- DEFAULT: '1',
- },
- fontFamily: {
- heading: 'Poppins',
- sans: [
- 'Basier Circle',
- 'ui-sans-serif',
- 'system-ui',
- '-apple-system',
- 'BlinkMacSystemFont',
- '"Segoe UI"',
- 'Roboto',
- '"Helvetica Neue"',
- 'Arial',
- '"Noto Sans"',
- 'sans-serif',
- '"Apple Color Emoji"',
- '"Segoe UI Emoji"',
- '"Segoe UI Symbol"',
- '"Noto Color Emoji"',
- ],
- serif: ['ui-serif', 'Georgia', 'Cambria', '"Times New Roman"', 'Times', 'serif'],
- mono: [
- 'ui-monospace',
- 'SFMono-Regular',
- 'Menlo',
- 'Monaco',
- 'Consolas',
- '"Liberation Mono"',
- '"Courier New"',
- 'monospace',
- ],
- },
- fontSize: {
- xxs: ['0.625rem', { lineHeight: '0.75rem' }],
- xs: ['0.75rem', { lineHeight: '1rem' }],
- sm: ['0.875rem', { lineHeight: '1.25rem' }],
- base: ['1rem', { lineHeight: '1.5rem' }],
- lg: ['1.125rem', { lineHeight: '1.75rem' }],
- xl: ['1.25rem', { lineHeight: '1.75rem' }],
- '2xl': ['1.5rem', { lineHeight: '2rem' }],
- '3xl': ['1.875rem', { lineHeight: '2.25rem' }],
- '4xl': ['2.25rem', { lineHeight: '2.5rem' }],
- '5xl': ['3rem', { lineHeight: '1' }],
- '6xl': ['3.75rem', { lineHeight: '1' }],
- '7xl': ['4.5rem', { lineHeight: '1' }],
- '8xl': ['6rem', { lineHeight: '1' }],
- '9xl': ['8rem', { lineHeight: '1' }],
- },
- fontWeight: {
- thin: '100',
- extralight: '200',
- light: '300',
- normal: '400',
- medium: '500',
- semibold: '600',
- bold: '700',
- extrabold: '800',
- black: '900',
- },
- gap: (theme) => theme('spacing'),
- gradientColorStops: (theme) => theme('colors'),
- gridAutoColumns: {
- auto: 'auto',
- min: 'min-content',
- max: 'max-content',
- fr: 'minmax(0, 1fr)',
- },
- gridAutoRows: {
- auto: 'auto',
- min: 'min-content',
- max: 'max-content',
- fr: 'minmax(0, 1fr)',
- },
- gridColumn: {
- auto: 'auto',
- 'span-1': 'span 1 / span 1',
- 'span-2': 'span 2 / span 2',
- 'span-3': 'span 3 / span 3',
- 'span-4': 'span 4 / span 4',
- 'span-5': 'span 5 / span 5',
- 'span-6': 'span 6 / span 6',
- 'span-7': 'span 7 / span 7',
- 'span-8': 'span 8 / span 8',
- 'span-9': 'span 9 / span 9',
- 'span-10': 'span 10 / span 10',
- 'span-11': 'span 11 / span 11',
- 'span-12': 'span 12 / span 12',
- 'span-full': '1 / -1',
- },
- gridColumnEnd: {
- auto: 'auto',
- 1: '1',
- 2: '2',
- 3: '3',
- 4: '4',
- 5: '5',
- 6: '6',
- 7: '7',
- 8: '8',
- 9: '9',
- 10: '10',
- 11: '11',
- 12: '12',
- 13: '13',
- },
- gridColumnStart: {
- auto: 'auto',
- 1: '1',
- 2: '2',
- 3: '3',
- 4: '4',
- 5: '5',
- 6: '6',
- 7: '7',
- 8: '8',
- 9: '9',
- 10: '10',
- 11: '11',
- 12: '12',
- 13: '13',
- },
- gridRow: {
- auto: 'auto',
- 'span-1': 'span 1 / span 1',
- 'span-2': 'span 2 / span 2',
- 'span-3': 'span 3 / span 3',
- 'span-4': 'span 4 / span 4',
- 'span-5': 'span 5 / span 5',
- 'span-6': 'span 6 / span 6',
- 'span-full': '1 / -1',
- },
- gridRowStart: {
- auto: 'auto',
- 1: '1',
- 2: '2',
- 3: '3',
- 4: '4',
- 5: '5',
- 6: '6',
- 7: '7',
- },
- gridRowEnd: {
- auto: 'auto',
- 1: '1',
- 2: '2',
- 3: '3',
- 4: '4',
- 5: '5',
- 6: '6',
- 7: '7',
- },
- transformOrigin: {
- center: 'center',
- top: 'top',
- 'top-right': 'top right',
- right: 'right',
- 'bottom-right': 'bottom right',
- bottom: 'bottom',
- 'bottom-left': 'bottom left',
- left: 'left',
- 'top-left': 'top left',
- },
- gridTemplateColumns: {
- none: 'none',
- 1: 'repeat(1, minmax(0, 1fr))',
- 2: 'repeat(2, minmax(0, 1fr))',
- 3: 'repeat(3, minmax(0, 1fr))',
- 4: 'repeat(4, minmax(0, 1fr))',
- 5: 'repeat(5, minmax(0, 1fr))',
- 6: 'repeat(6, minmax(0, 1fr))',
- 7: 'repeat(7, minmax(0, 1fr))',
- 8: 'repeat(8, minmax(0, 1fr))',
- 9: 'repeat(9, minmax(0, 1fr))',
- 10: 'repeat(10, minmax(0, 1fr))',
- 11: 'repeat(11, minmax(0, 1fr))',
- 12: 'repeat(12, minmax(0, 1fr))',
- },
- gridTemplateRows: {
- none: 'none',
- 1: 'repeat(1, minmax(0, 1fr))',
- 2: 'repeat(2, minmax(0, 1fr))',
- 3: 'repeat(3, minmax(0, 1fr))',
- 4: 'repeat(4, minmax(0, 1fr))',
- 5: 'repeat(5, minmax(0, 1fr))',
- 6: 'repeat(6, minmax(0, 1fr))',
- },
- height: (theme) => ({
- auto: 'auto',
- ...theme('spacing'),
- '1/2': '50%',
- '1/3': '33.333333%',
- '2/3': '66.666667%',
- '1/4': '25%',
- '2/4': '50%',
- '3/4': '75%',
- '1/5': '20%',
- '2/5': '40%',
- '3/5': '60%',
- '4/5': '80%',
- '1/6': '16.666667%',
- '2/6': '33.333333%',
- '3/6': '50%',
- '4/6': '66.666667%',
- '5/6': '83.333333%',
- full: '100%',
- screen: '100vh',
- }),
- inset: (theme, { negative }) => ({
- auto: 'auto',
- ...theme('spacing'),
- ...negative(theme('spacing')),
- '1/2': '50%',
- '1/3': '33.333333%',
- '2/3': '66.666667%',
- '1/4': '25%',
- '2/4': '50%',
- '3/4': '75%',
- full: '100%',
- '-1/2': '-50%',
- '-1/3': '-33.333333%',
- '-2/3': '-66.666667%',
- '-1/4': '-25%',
- '-2/4': '-50%',
- '-3/4': '-75%',
- '-full': '-100%',
- }),
- keyframes: {
- spin: {
- to: {
- transform: 'rotate(360deg)',
- },
- },
- ping: {
- '75%, 100%': {
- transform: 'scale(2)',
- opacity: '0',
- },
- },
- pulse: {
- '0%': {
- transform: 'scale(0.75)',
- boxShadow: '0 0 0 0 rgba(0, 191, 255, 0)',
- opacity: 1,
- },
- '100%': {
- transform: 'scale(1.25)',
- boxShadow: '0 0 0 10px rgba(0, 191, 255, 0.9)',
- opacity: 0,
- },
- },
- bounce: {
- '0%, 100%': {
- transform: 'translateY(-25%)',
- animationTimingFunction: 'cubic-bezier(0.8,0,1,1)',
- },
- '50%': {
- transform: 'none',
- animationTimingFunction: 'cubic-bezier(0,0,0.2,1)',
- },
- },
- banner: {
- '0%': {
- transform: 'translateY(0%)',
- },
- '11.11%': {
- transform: 'translateY(0%)',
- },
- '22.22%': {
- transform: 'translateY(0%)',
- },
- '33.33%': {
- transform: 'translateY(-33.33%)',
- },
- '44.44%': {
- transform: 'translateY(-33.33%)',
- },
- '55.55%': {
- transform: 'translateY(-33.33%)',
- },
- '66.66%': {
- transform: 'translateY(-66.66%)',
- },
- '77.77%': {
- transform: 'translateY(-66.66%)',
- },
- '88.88%': {
- transform: 'translateY(-66.66%)',
- },
- '100%': {
- transform: 'translateY(0%)',
- },
- },
- },
- letterSpacing: {
- tighter: '-0.05em',
- tight: '-0.025em',
- normal: '0em',
- wide: '0.025em',
- wider: '0.05em',
- widest: '0.1em',
- },
- lineHeight: {
- none: '1',
- tight: '1.25',
- snug: '1.375',
- normal: '1.5',
- relaxed: '1.625',
- loose: '2',
- 3: '.75rem',
- 4: '1rem',
- 5: '1.25rem',
- 6: '1.5rem',
- 7: '1.75rem',
- 8: '2rem',
- 9: '2.25rem',
- 10: '2.5rem',
- },
- listStyleType: {
- none: 'none',
- disc: 'disc',
- decimal: 'decimal',
- },
- margin: (theme, { negative }) => ({
- auto: 'auto',
- ...theme('spacing'),
- ...negative(theme('spacing')),
- }),
- maxHeight: (theme) => ({
- ...theme('spacing'),
- full: '100%',
- screen: '100vh',
- }),
- maxWidth: (theme, { breakpoints }) => ({
- none: 'none',
- 0: '0rem',
- xs: '20rem',
- sm: '24rem',
- md: '28rem',
- lg: '32rem',
- xl: '36rem',
- '2xl': '42rem',
- '3xl': '48rem',
- '4xl': '56rem',
- '5xl': '64rem',
- '6xl': '72rem',
- '7xl': '80rem',
- full: '100%',
- min: 'min-content',
- max: 'max-content',
- prose: '65ch',
- ...breakpoints(theme('screens')),
- }),
- minHeight: {
- 0: '0px',
- full: '100%',
- screen: '100vh',
- },
- minWidth: {
- 0: '0px',
- full: '100%',
- min: 'min-content',
- max: 'max-content',
- },
- objectPosition: {
- bottom: 'bottom',
- center: 'center',
- left: 'left',
- 'left-bottom': 'left bottom',
- 'left-top': 'left top',
- right: 'right',
- 'right-bottom': 'right bottom',
- 'right-top': 'right top',
- top: 'top',
- },
- opacity: {
- 0: '0',
- 5: '0.05',
- 10: '0.1',
- 20: '0.2',
- 25: '0.25',
- 30: '0.3',
- 40: '0.4',
- 50: '0.5',
- 60: '0.6',
- 70: '0.7',
- 75: '0.75',
- 80: '0.8',
- 90: '0.9',
- 95: '0.95',
- 100: '1',
- },
- order: {
- first: '-9999',
- last: '9999',
- none: '0',
- 1: '1',
- 2: '2',
- 3: '3',
- 4: '4',
- 5: '5',
- 6: '6',
- 7: '7',
- 8: '8',
- 9: '9',
- 10: '10',
- 11: '11',
- 12: '12',
- },
- outline: {
- none: ['2px solid transparent', '2px'],
- white: ['2px dotted white', '2px'],
- black: ['2px dotted black', '2px'],
- },
- padding: (theme) => theme('spacing'),
- placeholderColor: (theme) => theme('colors'),
- placeholderOpacity: (theme) => theme('opacity'),
- ringColor: (theme) => ({
- DEFAULT: theme('colors.blue.500', '#3b82f6'),
- ...theme('colors'),
- }),
- ringOffsetColor: (theme) => theme('colors'),
- ringOffsetWidth: {
- 0: '0px',
- 1: '1px',
- 2: '2px',
- 4: '4px',
- 8: '8px',
- },
- ringOpacity: (theme) => ({
- DEFAULT: '0.5',
- ...theme('opacity'),
- }),
- ringWidth: {
- DEFAULT: '3px',
- 0: '0px',
- 1: '1px',
- 2: '2px',
- 4: '4px',
- 8: '8px',
- },
- rotate: {
- '-180': '-180deg',
- '-90': '-90deg',
- '-45': '-45deg',
- '-12': '-12deg',
- '-6': '-6deg',
- '-3': '-3deg',
- '-2': '-2deg',
- '-1': '-1deg',
- 0: '0deg',
- 1: '1deg',
- 2: '2deg',
- 3: '3deg',
- 6: '6deg',
- 12: '12deg',
- 45: '45deg',
- 90: '90deg',
- 180: '180deg',
- },
- scale: {
- 0: '0',
- 50: '.5',
- 75: '.75',
- 90: '.9',
- 95: '.95',
- 100: '1',
- 105: '1.05',
- 110: '1.1',
- 125: '1.25',
- 150: '1.5',
- },
- skew: {
- '-12': '-12deg',
- '-6': '-6deg',
- '-3': '-3deg',
- '-2': '-2deg',
- '-1': '-1deg',
- 0: '0deg',
- 1: '1deg',
- 2: '2deg',
- 3: '3deg',
- 6: '6deg',
- 12: '12deg',
- },
- space: (theme, { negative }) => ({
- ...theme('spacing'),
- ...negative(theme('spacing')),
- }),
- stroke: {
- current: 'currentColor',
- },
- strokeWidth: {
- 0: '0',
- 1: '1',
- 2: '2',
- },
- textColor: (theme) => theme('colors'),
- textOpacity: (theme) => theme('opacity'),
- transitionDuration: {
- DEFAULT: '150ms',
- 75: '75ms',
- 100: '100ms',
- 150: '150ms',
- 200: '200ms',
- 300: '300ms',
- 500: '500ms',
- 700: '700ms',
- 1000: '1000ms',
- },
- transitionDelay: {
- 75: '75ms',
- 100: '100ms',
- 150: '150ms',
- 200: '200ms',
- 300: '300ms',
- 500: '500ms',
- 700: '700ms',
- 1000: '1000ms',
- },
- transitionProperty: {
- none: 'none',
- all: 'all',
- DEFAULT:
- 'background-color, border-color, color, fill, stroke, opacity, box-shadow, transform',
- colors: 'background-color, border-color, color, fill, stroke',
- opacity: 'opacity',
- shadow: 'box-shadow',
- transform: 'transform',
- },
- transitionTimingFunction: {
- DEFAULT: 'cubic-bezier(0.4, 0, 0.2, 1)',
- linear: 'linear',
- in: 'cubic-bezier(0.4, 0, 1, 1)',
- out: 'cubic-bezier(0, 0, 0.2, 1)',
- 'in-out': 'cubic-bezier(0.4, 0, 0.2, 1)',
- },
- translate: (theme, { negative }) => ({
- ...theme('spacing'),
- ...negative(theme('spacing')),
- '1/2': '50%',
- '1/3': '33.333333%',
- '2/3': '66.666667%',
- '1/4': '25%',
- '2/4': '50%',
- '3/4': '75%',
- full: '100%',
- '-1/2': '-50%',
- '-1/3': '-33.333333%',
- '-2/3': '-66.666667%',
- '-1/4': '-25%',
- '-2/4': '-50%',
- '-3/4': '-75%',
- '-full': '-100%',
- }),
- width: (theme) => ({
- auto: 'auto',
- ...theme('spacing'),
- '1/2': '50%',
- '1/3': '33.333333%',
- '2/3': '66.666667%',
- '1/4': '25%',
- '2/4': '50%',
- '3/4': '75%',
- '1/5': '20%',
- '2/5': '40%',
- '3/5': '60%',
- '4/5': '80%',
- '1/6': '16.666667%',
- '2/6': '33.333333%',
- '3/6': '50%',
- '4/6': '66.666667%',
- '5/6': '83.333333%',
- '1/12': '8.333333%',
- '2/12': '16.666667%',
- '3/12': '25%',
- '4/12': '33.333333%',
- '5/12': '41.666667%',
- '6/12': '50%',
- '7/12': '58.333333%',
- '8/12': '66.666667%',
- '9/12': '75%',
- '10/12': '83.333333%',
- '11/12': '91.666667%',
- full: '100%',
- screen: '100vw',
- min: 'min-content',
- max: 'max-content',
- }),
- zIndex: {
- auto: 'auto',
- 0: '0',
- 10: '10',
- 20: '20',
- 30: '30',
- 40: '40',
- 50: '50',
- 60: '60',
- 70: '70',
- },
- lineClamp: {
- 1: 1,
- 2: 2,
- 3: 3,
- },
- dropShadow: {
- blue: '1px 0px 3px #00BFFF',
- },
- },
- variantOrder: [
- 'first',
- 'last',
- 'odd',
- 'even',
- 'visited',
- 'checked',
- 'group-hover',
- 'group-focus',
- 'focus-within',
- 'hover',
- 'focus',
- 'focus-visible',
- 'active',
- 'disabled',
- ],
- variants: {
- accessibility: ['responsive', 'focus-within', 'focus'],
- alignContent: ['responsive'],
- alignItems: ['responsive'],
- alignSelf: ['responsive'],
- animation: ['responsive'],
- appearance: ['responsive'],
- backgroundAttachment: ['responsive'],
- backgroundClip: ['responsive'],
- backgroundColor: [
- 'responsive',
- 'dark',
- 'group-hover',
- 'focus-within',
- 'hover',
- 'focus',
- 'active',
- ],
- backgroundImage: ['responsive'],
- backgroundOpacity: ['responsive', 'group-hover', 'focus-within', 'hover', 'focus'],
- backgroundPosition: ['responsive'],
- backgroundRepeat: ['responsive'],
- backgroundSize: ['responsive'],
- borderCollapse: ['responsive'],
- borderColor: ['responsive', 'dark', 'group-hover', 'focus-within', 'hover', 'focus', 'last'],
- borderOpacity: ['responsive', 'group-hover', 'focus-within', 'hover', 'focus'],
- borderRadius: ['responsive'],
- borderStyle: ['responsive'],
- borderWidth: ['responsive', 'hover', 'first'],
- boxShadow: ['responsive', 'group-hover', 'focus-within', 'hover', 'focus'],
- boxSizing: ['responsive'],
- clear: ['responsive'],
- container: ['responsive'],
- cursor: ['responsive'],
- display: ['responsive'],
- divideColor: ['responsive', 'dark'],
- divideOpacity: ['responsive'],
- divideStyle: ['responsive'],
- divideWidth: ['responsive'],
- fill: ['responsive'],
- flex: ['responsive'],
- flexDirection: ['responsive'],
- flexGrow: ['responsive'],
- flexShrink: ['responsive'],
- flexWrap: ['responsive'],
- float: ['responsive'],
- fontFamily: ['responsive'],
- fontSize: ['responsive'],
- fontSmoothing: ['responsive'],
- fontStyle: ['responsive'],
- fontVariantNumeric: ['responsive'],
- fontWeight: ['responsive'],
- gap: ['responsive'],
- gradientColorStops: ['responsive', 'dark', 'hover', 'focus'],
- gridAutoColumns: ['responsive'],
- gridAutoFlow: ['responsive'],
- gridAutoRows: ['responsive'],
- gridColumn: ['responsive'],
- gridColumnEnd: ['responsive'],
- gridColumnStart: ['responsive'],
- gridRow: ['responsive'],
- gridRowEnd: ['responsive'],
- gridRowStart: ['responsive'],
- gridTemplateColumns: ['responsive'],
- gridTemplateRows: ['responsive'],
- height: ['responsive'],
- inset: ['responsive'],
- justifyContent: ['responsive'],
- justifyItems: ['responsive'],
- justifySelf: ['responsive'],
- letterSpacing: ['responsive'],
- lineHeight: ['responsive'],
- listStylePosition: ['responsive'],
- listStyleType: ['responsive'],
- margin: ['responsive'],
- maxHeight: ['responsive'],
- maxWidth: ['responsive'],
- minHeight: ['responsive'],
- minWidth: ['responsive'],
- objectFit: ['responsive'],
- objectPosition: ['responsive'],
- opacity: ['responsive', 'group-hover', 'focus-within', 'hover', 'focus'],
- order: ['responsive'],
- outline: ['responsive', 'focus-within', 'focus'],
- overflow: ['responsive'],
- overscrollBehavior: ['responsive'],
- padding: ['responsive'],
- placeContent: ['responsive'],
- placeItems: ['responsive'],
- placeSelf: ['responsive'],
- placeholderColor: ['responsive', 'dark', 'focus'],
- placeholderOpacity: ['responsive', 'focus'],
- pointerEvents: ['responsive'],
- position: ['responsive'],
- resize: ['responsive'],
- ringColor: ['responsive', 'dark', 'focus-within', 'focus', 'hover'],
- ringOffsetColor: ['responsive', 'dark', 'focus-within', 'focus', 'hover'],
- ringOffsetWidth: ['responsive', 'focus-within', 'focus', 'hover'],
- ringOpacity: ['responsive', 'focus-within', 'focus', 'hover'],
- ringWidth: ['responsive', 'focus-within', 'focus', 'hover'],
- rotate: ['responsive', 'hover', 'focus', 'group-hover'],
- scale: ['responsive', 'hover', 'focus'],
- skew: ['responsive', 'hover', 'focus'],
- space: ['responsive'],
- stroke: ['responsive'],
- strokeWidth: ['responsive'],
- tableLayout: ['responsive'],
- textAlign: ['responsive'],
- textColor: ['responsive', 'dark', 'group-hover', 'focus-within', 'hover', 'focus'],
- textDecoration: ['responsive', 'group-hover', 'focus-within', 'hover', 'focus'],
- textOpacity: ['responsive', 'group-hover', 'focus-within', 'hover', 'focus'],
- textOverflow: ['responsive'],
- textTransform: ['responsive'],
- transform: ['responsive'],
- transformOrigin: ['responsive'],
- transitionDelay: ['responsive'],
- transitionDuration: ['responsive'],
- transitionProperty: ['responsive'],
- transitionTimingFunction: ['responsive'],
- translate: ['responsive', 'hover', 'focus'],
- userSelect: ['responsive'],
- verticalAlign: ['responsive'],
- visibility: ['responsive'],
- whitespace: ['responsive'],
- width: ['responsive'],
- wordBreak: ['responsive'],
- zIndex: ['responsive', 'focus-within', 'focus', 'hover'],
- },
- plugins: [forms],
-};