Tailwind v3 Setup
Install
Section titled “Install”cat > tailwind.config.mjs <<EOF// import colors from 'tailwindcss/colors';import typography from '@tailwindcss/typography';
/** @type {import('tailwindcss').Config} */export default { content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'], safelist: [ // In Markdown (README…) 'justify-evenly', 'overflow-hidden', 'rounded-md',
// From the Hugo Dashboard 'w-64', 'w-1/2', 'rounded-l-lg', 'rounded-r-lg', 'bg-gray-200', 'grid-cols-4', 'grid-cols-7', 'h-6', 'leading-6', 'h-9', 'leading-9', 'shadow-lg', 'bg-opacity-50', 'dark:bg-opacity-80',
// For Astro one 'grid', ], theme: { accentColor: ({ theme }) => ({ ...theme('colors'), auto: 'auto', }), 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 1s infinite', }, aria: { busy: 'busy="true"', checked: 'checked="true"', disabled: 'disabled="true"', expanded: 'expanded="true"', hidden: 'hidden="true"', pressed: 'pressed="true"', readonly: 'readonly="true"', required: 'required="true"', selected: 'selected="true"', }, aspectRatio: { auto: 'auto', square: '1 / 1', video: '16 / 9', }, backdropBlur: ({ theme }) => theme('blur'), backdropBrightness: ({ theme }) => theme('brightness'), backdropContrast: ({ theme }) => theme('contrast'), backdropGrayscale: ({ theme }) => theme('grayscale'), backdropHueRotate: ({ theme }) => theme('hueRotate'), backdropInvert: ({ theme }) => theme('invert'), backdropOpacity: ({ theme }) => theme('opacity'), backdropSaturate: ({ theme }) => theme('saturate'), backdropSepia: ({ theme }) => theme('sepia'), 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))', }, 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', }, blur: { 0: '0', none: '', sm: '4px', DEFAULT: '8px', md: '12px', lg: '16px', xl: '24px', '2xl': '40px', '3xl': '64px', }, 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', full: '9999px', }, borderSpacing: ({ theme }) => ({ ...theme('spacing'), }), borderWidth: { DEFAULT: '1px', 0: '0px', 2: '2px', 4: '4px', 8: '8px', }, boxShadow: { sm: '0 1px 2px 0 rgb(0 0 0 / 0.05)', DEFAULT: '0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)', md: '0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)', lg: '0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)', xl: '0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)', '2xl': '0 25px 50px -12px rgb(0 0 0 / 0.25)', inner: 'inset 0 2px 4px 0 rgb(0 0 0 / 0.05)', none: 'none', }, boxShadowColor: ({ theme }) => theme('colors'), brightness: { 0: '0', 50: '.5', 75: '.75', 90: '.9', 95: '.95', 100: '1', 105: '1.05', 110: '1.1', 125: '1.25', 150: '1.5', 200: '2', }, caretColor: ({ theme }) => theme('colors'), colors: ({ colors }) => ({ inherit: colors.inherit, current: colors.current, transparent: 'transparent', text: { DEFAULT: '#151515', 50: '#E8E8E8', 100: '#D1D1D1', 200: '#A1A1A1', 300: '#737373', 400: '#454545', 500: '#151515', 600: '#121212', 700: '#0D0D0D', 800: '#080808', 900: '#050505', 950: '#030303', }, 'nerden-dark': { DEFAULT: '#151515', 50: '#E8E8E8', 100: '#D1D1D1', 200: '#A1A1A1', 300: '#737373', 400: '#454545', 500: '#151515', 600: '#121212', 700: '#0D0D0D', 800: '#080808', 900: '#050505', 950: '#030303', }, black: { DEFAULT: '#000000', 50: '#e6e6e6', 100: '#cccccc', 200: '#999999', 300: '#666666', 400: '#333333', 500: '#000000', 600: '#000000', 700: '#000000', 800: '#000000', 900: '#000000', 950: '#000000', }, white: '#ffffff', slate: { DEFAULT: '#64748b', 50: '#f0f2f4', 100: '#dee2e8', 200: '#c1c8d2', 300: '#a0abbb', 400: '#8291a5', 500: '#64748b', 600: '#515e71', 700: '#3c4553', 800: '#292f38', 900: '#13161b', 950: '#0b0c0f', }, gray: { DEFAULT: '#6b7280', 50: '#f1f2f3', 100: '#e0e2e5', 200: '#c2c5cc', 300: '#a6abb5', 400: '#888e9b', 500: '#6b7280', 600: '#565c67', 700: '#41454e', 800: '#2a2d32', 900: '#151619', 950: '#0c0c0e', }, zinc: { DEFAULT: '#71717a', 50: '#f2f2f3', 100: '#e2e2e4', 200: '#c5c5c9', 300: '#aaaab1', 400: '#8d8d96', 500: '#71717a', 600: '#5b5b62', 700: '#45454a', 800: '#2c2c30', 900: '#161618', 950: '#0c0c0d', }, neutral: { DEFAULT: '#737373', 50: '#f2f2f2', 100: '#e3e3e3', 200: '#c7c7c7', 300: '#ababab', 400: '#8f8f8f', 500: '#737373', 600: '#5c5c5c', 700: '#454545', 800: '#2e2e2e', 900: '#171717', 950: '#0d0d0d', }, stone: { DEFAULT: '#78716c', 50: '#f1f0ef', 100: '#e4e3e1', 200: '#cac6c4', 300: '#afaaa6', 400: '#958e89', 500: '#78716c', 600: '#615b57', 700: '#484441', 800: '#302d2b', 900: '#181716', 950: '#0b0a0a', }, red: { DEFAULT: '#ef4444', 50: '#fdecec', 100: '#fcd9d9', 200: '#f9b4b4', 300: '#f58e8e', 400: '#f26969', 500: '#ef4444', 600: '#e11313', 700: '#a90f0f', 800: '#710a0a', 900: '#380505', 950: '#1c0202', }, orange: { DEFAULT: '#f97316', 50: '#fef0e6', 100: '#fee4d2', 200: '#fdc7a1', 300: '#fbac74', 400: '#fa8f42', 500: '#f97316', 600: '#d15a05', 700: '#9f4504', 800: '#682d03', 900: '#371801', 950: '#190b01', }, amber: { DEFAULT: '#f59e0b', 50: '#fef5e7', 100: '#fdecce', 200: '#fbd99d', 300: '#f9c56c', 400: '#f7b23b', 500: '#f59e0b', 600: '#c47f08', 700: '#935f06', 800: '#624004', 900: '#312002', 950: '#181001', }, yellow: { DEFAULT: '#eab308', 50: '#fef8e6', 100: '#fdf1ce', 200: '#fbe297', 300: '#fad566', 400: '#f8c630', 500: '#eab308', 600: '#bb8e06', 700: '#8f6c05', 800: '#5e4703', 900: '#312502', 950: '#191301', }, lime: { DEFAULT: '#84cc16', 50: '#f2fce3', 100: '#e7facc', 200: '#d0f49a', 300: '#b8ef67', 400: '#9fe930', 500: '#84cc16', 600: '#68a111', 700: '#507c0d', 800: '#355309', 900: '#1b2904', 950: '#0c1202', }, green: { DEFAULT: '#22c55e', 50: '#e9fbf0', 100: '#cff7de', 200: '#9fefbc', 300: '#6fe69b', 400: '#40de7a', 500: '#22c55e', 600: '#1b9d4b', 700: '#147538', 800: '#0d4e25', 900: '#072713', 950: '#04160a', }, emerald: { DEFAULT: '#10b981', 50: '#e3fdf4', 100: '#c7fae9', 200: '#8ef5d3', 300: '#56f0bd', 400: '#1eeca7', 500: '#10b981', 600: '#0d9668', 700: '#0a714e', 800: '#064b34', 900: '#03261a', 950: '#02130d', }, teal: { DEFAULT: '#14b8a6', 50: '#e3fcf9', 100: '#c8f9f3', 200: '#91f3e8', 300: '#59eddc', 400: '#22e7d0', 500: '#14b8a6', 600: '#109384', 700: '#0c6e63', 800: '#084a42', 900: '#042521', 950: '#021210', }, cyan: { DEFAULT: '#06b6d4', 50: '#e1fafe', 100: '#c8f6fd', 200: '#8debfc', 300: '#56e2fa', 400: '#1bd7f9', 500: '#06b6d4', 600: '#0590a9', 700: '#046e81', 800: '#024854', 900: '#01262d', 950: '#011114', }, sky: { DEFAULT: '#0ea5e9', 50: '#e7f6fe', 100: '#cfeefc', 200: '#9adbf9', 300: '#6acaf6', 400: '#3ab8f3', 500: '#0ea5e9', 600: '#0b84bc', 700: '#08628c', 800: '#05405b', 900: '#032230', 950: '#011118', }, blue: { DEFAULT: '#3b82f6', 50: '#ebf3fe', 100: '#d8e6fd', 200: '#b1cefb', 300: '#8ab5fa', 400: '#639cf8', 500: '#3b82f6', 600: '#0b60ea', 700: '#0848b0', 800: '#053075', 900: '#03183b', 950: '#010c1d', }, indigo: { DEFAULT: '#6366f1', 50: '#f1f1fe', 100: '#dedffc', 200: '#c2c3fa', 300: '#a1a3f7', 400: '#8183f4', 500: '#6366f1', 600: '#2326eb', 700: '#1114bb', 800: '#0b0d7e', 900: '#05063d', 950: '#030321', }, violet: { DEFAULT: '#8b5cf6', 50: '#f5f1fe', 100: '#e7ddfd', 200: '#d2c0fc', 300: '#ba9efa', 400: '#a27df8', 500: '#8b5cf6', 600: '#5c1cf2', 700: '#410bc1', 800: '#2c0782', 900: '#15033f', 950: '#0b0222', }, purple: { DEFAULT: '#a855f7', 50: '#f8f0fe', 100: '#eeddfd', 200: '#dcbbfc', 300: '#cb99fa', 400: '#ba77f9', 500: '#a855f7', 600: '#8815f4', 700: '#6609be', 800: '#44067f', 900: '#22033f', 950: '#120222', }, fuchsia: { DEFAULT: '#d946ef', 50: '#fbecfd', 100: '#f7d9fc', 200: '#efb4f9', 300: '#e88ef5', 400: '#e069f2', 500: '#d946ef', 600: '#c613e1', 700: '#940fa9', 800: '#630a71', 900: '#310538', 950: '#19021c', }, pink: { DEFAULT: '#ec4899', 50: '#fdedf5', 100: '#fbdaeb', 200: '#f7b5d6', 300: '#f390c2', 400: '#f06bad', 500: '#ec4899', 600: '#de177a', 700: '#a6115c', 800: '#6f0c3d', 900: '#37061f', 950: '#1c030f', }, rose: { DEFAULT: '#f43f5e', 50: '#feecef', 100: '#fdd8de', 200: '#fbb2be', 300: '#f88b9d', 400: '#f6657d', 500: '#f43f5e', 600: '#e80d32', 700: '#ae0a25', 800: '#740719', 900: '#3a030c', 950: '#1d0206', }, }), columns: { 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', '3xs': '16rem', '2xs': '18rem', xs: '20rem', sm: '24rem', md: '28rem', lg: '32rem', xl: '36rem', '2xl': '42rem', '3xl': '48rem', '4xl': '56rem', '5xl': '64rem', '6xl': '72rem', '7xl': '80rem', }, container: { // center: false, }, content: { none: 'none', }, contrast: { 0: '0', 50: '.5', 75: '.75', 100: '1', 125: '1.25', 150: '1.5', 200: '2', }, cursor: { auto: 'auto', default: 'default', pointer: 'pointer', wait: 'wait', text: 'text', move: 'move', help: 'help', 'not-allowed': 'not-allowed', none: 'none', 'context-menu': 'context-menu', progress: 'progress', cell: 'cell', crosshair: 'crosshair', 'vertical-text': 'vertical-text', alias: 'alias', copy: 'copy', 'no-drop': 'no-drop', grab: 'grab', grabbing: 'grabbing', 'all-scroll': 'all-scroll', 'col-resize': 'col-resize', 'row-resize': 'row-resize', 'n-resize': 'n-resize', 'e-resize': 'e-resize', 's-resize': 's-resize', 'w-resize': 'w-resize', 'ne-resize': 'ne-resize', 'nw-resize': 'nw-resize', 'se-resize': 'se-resize', 'sw-resize': 'sw-resize', 'ew-resize': 'ew-resize', 'ns-resize': 'ns-resize', 'nesw-resize': 'nesw-resize', 'nwse-resize': 'nwse-resize', 'zoom-in': 'zoom-in', 'zoom-out': 'zoom-out', }, divideColor: ({ theme }) => theme('borderColor'), divideOpacity: ({ theme }) => theme('borderOpacity'), divideWidth: ({ theme }) => theme('borderWidth'), dropShadow: { sm: '0 1px 1px rgb(0 0 0 / 0.05)', DEFAULT: ['0 1px 2px rgb(0 0 0 / 0.1)', '0 1px 1px rgb(0 0 0 / 0.06)'], md: ['0 4px 3px rgb(0 0 0 / 0.07)', '0 2px 2px rgb(0 0 0 / 0.06)'], lg: ['0 10px 8px rgb(0 0 0 / 0.04)', '0 4px 3px rgb(0 0 0 / 0.1)'], xl: ['0 20px 13px rgb(0 0 0 / 0.03)', '0 8px 5px rgb(0 0 0 / 0.08)'], '2xl': '0 25px 25px rgb(0 0 0 / 0.15)', none: '0 0 #0000', }, extend: { // Defined animations animation: { 'fade-in': 'fade-in 1s ease-in-out', 'fade-out': 'fade-out 1s ease-in-out', disappear: 'disappear 1.5s ease-in-out forwards', }, blur: { xs: '2px', }, borderRadius: { '4xl': '2rem', }, boxShadow: { xs: '0 1px 2px 0 rgb(0 0 0 / 0.02)', }, colors: { // Your preferred accent color. Indigo is closest to Starlight’s defaults. // accent: colors.secondary, accent: { DEFAULT: '#fbbf24', 50: '#fff9eb', 100: '#fef2d2', 200: '#fde6aa', 300: '#fdd87d', 400: '#fccb50', 500: '#fbbf24', 600: '#e1a304', 700: '#aa7b03', 800: '#735302', 900: '#372801', 950: '#1e1601', }, // Your preferred gray scale. Zinc is closest to Starlight’s defaults. // gray: colors.grey, gray: { DEFAULT: '#6b7280', 50: '#f1f2f3', 100: '#e0e2e5', 200: '#c2c5cc', 300: '#a6abb5', 400: '#888e9b', 500: '#6b7280', 600: '#565c67', 700: '#41454e', 800: '#2a2d32', 900: '#151619', 950: '#0c0c0e', }, 'nerden-dark': { DEFAULT: '#151515', 50: '#E8E8E8', 100: '#D1D1D1', 200: '#A1A1A1', 300: '#737373', 400: '#454545', 500: '#151515', 600: '#121212', 700: '#0D0D0D', 800: '#080808', 900: '#050505', 950: '#030303', }, black: { DEFAULT: '#000000', 50: '#e6e6e6', 100: '#cccccc', 200: '#999999', 300: '#666666', 400: '#333333', 500: '#000000', 600: '#000000', 700: '#000000', 800: '#000000', 900: '#000000', 950: '#000000', }, white: { DEFAULT: '#ffffff', 50: '#ffffff', 100: '#ffffff', 200: '#ffffff', 300: '#ffffff', 400: '#ffffff', 500: '#ffffff', 600: '#ffffff', 700: '#ffffff', 800: '#ffffff', 900: '#ffffff', 950: '#ffffff', }, slate: { DEFAULT: '#64748b', 50: '#f0f2f4', 100: '#dee2e8', 200: '#c1c8d2', 300: '#a0abbb', 400: '#8291a5', 500: '#64748b', 600: '#515e71', 700: '#3c4553', 800: '#292f38', 900: '#13161b', 950: '#0b0c0f', }, zinc: { DEFAULT: '#71717a', 50: '#f2f2f3', 100: '#e2e2e4', 200: '#c5c5c9', 300: '#aaaab1', 400: '#8d8d96', 500: '#71717a', 600: '#5b5b62', 700: '#45454a', 800: '#2c2c30', 900: '#161618', 950: '#0c0c0d', }, neutral: { DEFAULT: '#737373', 50: '#f2f2f2', 100: '#e3e3e3', 200: '#c7c7c7', 300: '#ababab', 400: '#8f8f8f', 500: '#737373', 600: '#5c5c5c', 700: '#454545', 800: '#2e2e2e', 900: '#171717', 950: '#0d0d0d', }, stone: { DEFAULT: '#78716c', 50: '#f1f0ef', 100: '#e4e3e1', 200: '#cac6c4', 300: '#afaaa6', 400: '#958e89', 500: '#78716c', 600: '#615b57', 700: '#484441', 800: '#302d2b', 900: '#181716', 950: '#0b0a0a', }, red: { DEFAULT: '#ef4444', 50: '#fdecec', 100: '#fcd9d9', 200: '#f9b4b4', 300: '#f58e8e', 400: '#f26969', 500: '#ef4444', 600: '#e11313', 700: '#a90f0f', 800: '#710a0a', 900: '#380505', 950: '#1c0202', }, orange: { DEFAULT: '#f97316', 50: '#fef0e6', 100: '#fee4d2', 200: '#fdc7a1', 300: '#fbac74', 400: '#fa8f42', 500: '#f97316', 600: '#d15a05', 700: '#9f4504', 800: '#682d03', 900: '#371801', 950: '#190b01', }, amber: { DEFAULT: '#f59e0b', 50: '#fef5e7', 100: '#fdecce', 200: '#fbd99d', 300: '#f9c56c', 400: '#f7b23b', 500: '#f59e0b', 600: '#c47f08', 700: '#935f06', 800: '#624004', 900: '#312002', 950: '#181001', }, yellow: { DEFAULT: '#eab308', 50: '#fef8e6', 100: '#fdf1ce', 200: '#fbe297', 300: '#fad566', 400: '#f8c630', 500: '#eab308', 600: '#bb8e06', 700: '#8f6c05', 800: '#5e4703', 900: '#312502', 950: '#191301', }, lime: { DEFAULT: '#84cc16', 50: '#f2fce3', 100: '#e7facc', 200: '#d0f49a', 300: '#b8ef67', 400: '#9fe930', 500: '#84cc16', 600: '#68a111', 700: '#507c0d', 800: '#355309', 900: '#1b2904', 950: '#0c1202', }, green: { DEFAULT: '#22c55e', 50: '#e9fbf0', 100: '#cff7de', 200: '#9fefbc', 300: '#6fe69b', 400: '#40de7a', 500: '#22c55e', 600: '#1b9d4b', 700: '#147538', 800: '#0d4e25', 900: '#072713', 950: '#04160a', }, emerald: { DEFAULT: '#10b981', 50: '#e3fdf4', 100: '#c7fae9', 200: '#8ef5d3', 300: '#56f0bd', 400: '#1eeca7', 500: '#10b981', 600: '#0d9668', 700: '#0a714e', 800: '#064b34', 900: '#03261a', 950: '#02130d', }, teal: { DEFAULT: '#14b8a6', 50: '#e3fcf9', 100: '#c8f9f3', 200: '#91f3e8', 300: '#59eddc', 400: '#22e7d0', 500: '#14b8a6', 600: '#109384', 700: '#0c6e63', 800: '#084a42', 900: '#042521', 950: '#021210', }, cyan: { DEFAULT: '#06b6d4', 50: '#e1fafe', 100: '#c8f6fd', 200: '#8debfc', 300: '#56e2fa', 400: '#1bd7f9', 500: '#06b6d4', 600: '#0590a9', 700: '#046e81', 800: '#024854', 900: '#01262d', 950: '#011114', }, sky: { DEFAULT: '#0ea5e9', 50: '#e7f6fe', 100: '#cfeefc', 200: '#9adbf9', 300: '#6acaf6', 400: '#3ab8f3', 500: '#0ea5e9', 600: '#0b84bc', 700: '#08628c', 800: '#05405b', 900: '#032230', 950: '#011118', }, blue: { DEFAULT: '#3b82f6', 50: '#ebf3fe', 100: '#d8e6fd', 200: '#b1cefb', 300: '#8ab5fa', 400: '#639cf8', 500: '#3b82f6', 600: '#0b60ea', 700: '#0848b0', 800: '#053075', 900: '#03183b', 950: '#010c1d', }, indigo: { DEFAULT: '#6366f1', 50: '#f1f1fe', 100: '#dedffc', 200: '#c2c3fa', 300: '#a1a3f7', 400: '#8183f4', 500: '#6366f1', 600: '#2326eb', 700: '#1114bb', 800: '#0b0d7e', 900: '#05063d', 950: '#030321', }, violet: { DEFAULT: '#8b5cf6', 50: '#f5f1fe', 100: '#e7ddfd', 200: '#d2c0fc', 300: '#ba9efa', 400: '#a27df8', 500: '#8b5cf6', 600: '#5c1cf2', 700: '#410bc1', 800: '#2c0782', 900: '#15033f', 950: '#0b0222', }, purple: { DEFAULT: '#a855f7', 50: '#f8f0fe', 100: '#eeddfd', 200: '#dcbbfc', 300: '#cb99fa', 400: '#ba77f9', 500: '#a855f7', 600: '#8815f4', 700: '#6609be', 800: '#44067f', 900: '#22033f', 950: '#120222', }, fuchsia: { DEFAULT: '#d946ef', 50: '#fbecfd', 100: '#f7d9fc', 200: '#efb4f9', 300: '#e88ef5', 400: '#e069f2', 500: '#d946ef', 600: '#c613e1', 700: '#940fa9', 800: '#630a71', 900: '#310538', 950: '#19021c', }, pink: { DEFAULT: '#ec4899', 50: '#fdedf5', 100: '#fbdaeb', 200: '#f7b5d6', 300: '#f390c2', 400: '#f06bad', 500: '#ec4899', 600: '#de177a', 700: '#a6115c', 800: '#6f0c3d', 900: '#37061f', 950: '#1c030f', }, rose: { DEFAULT: '#f43f5e', 50: '#feecef', 100: '#fdd8de', 200: '#fbb2be', 300: '#f88b9d', 400: '#f6657d', 500: '#f43f5e', 600: '#e80d32', 700: '#ae0a25', 800: '#740719', 900: '#3a030c', 950: '#1d0206', }, 'blue-gray': { DEFAULT: '#607d8b', 50: '#f0f3f5', 100: '#dee5e8', 200: '#bdcad1', 300: '#9eb2bc', 400: '#7d98a5', 500: '#607d8b', 600: '#4d6470', 700: '#3a4c54', 800: '#263136', 900: '#13181b', 950: '#0a0e0f', }, body: { DEFAULT: '#4f4f4f', 50: '#ededed', 100: '#dbdbdb', 200: '#b8b8b8', 300: '#969696', 400: '#737373', 500: '#4f4f4f', 600: '#404040', 700: '#303030', 800: '#1f1f1f', 900: '#0f0f0f', 950: '#080808', dark: '#303030', }, 'body-dark': { DEFAULT: '#303030', 50: '#ebebeb', 100: '#d6d6d6', 200: '#adadad', 300: '#828282', 400: '#595959', 500: '#303030', 600: '#262626', 700: '#1c1c1c', 800: '#141414', 900: '#0a0a0a', 950: '#050505', }, brown: { DEFAULT: '#795548', 50: '#f4eeec', 100: '#e8ddd9', 200: '#cfb8af', 300: '#b99589', 400: '#a0705f', 500: '#795548', 600: '#604339', 700: '#4a342c', 800: '#30221d', 900: '#1a120f', 950: '#0d0908', }, danger: { DEFAULT: '#800000', 50: '#ffdbdb', 100: '#ffb3b3', 200: '#ff6666', 300: '#ff1a1a', 400: '#cc0000', 500: '#800000', 600: '#660000', 700: '#4d0000', 800: '#330000', 900: '#190000', 950: '#0f0000', }, dark: { DEFAULT: '#1f2937', 50: '#e5eaf0', 100: '#c8d2e0', 200: '#93a7c2', 300: '#5c7aa3', 400: '#3f536f', 500: '#1f2937', 600: '#1a222e', 700: '#121821', 800: '#0d1117', 900: '#06070a', 950: '#040507', }, 'deep-orange': { DEFAULT: '#ff5722', 50: '#ffefeb', 100: '#ffdcd1', 200: '#ffbda8', 300: '#ff997a', 400: '#ff764d', 500: '#ff5722', 600: '#e63600', 700: '#ad2800', 800: '#751b00', 900: '#380d00', 950: '#1f0700', }, 'deep-purple': { DEFAULT: '#673ab7', 50: '#f0ecf9', 100: '#dfd4f2', 200: '#c2aee5', 300: '#a283d8', 400: '#855ccb', 500: '#673ab7', 600: '#532f93', 700: '#3e226c', 800: '#2a174a', 900: '#140b23', 950: '#0b0613', }, disabled: { DEFAULT: '#9ca3af', 50: '#f4f5f6', 100: '#ebedef', 200: '#d8dadf', 300: '#c4c8cf', 400: '#b0b6bf', 500: '#9ca3af', 600: '#788192', 700: '#59616e', 800: '#3b4049', 900: '#1e2025', 950: '#0e0f11', }, 'gray-dark': { DEFAULT: '#273444', 50: '#e5eaf0', 100: '#cbd5e1', 200: '#97abc4', 300: '#6784a8', 400: '#455c78', 500: '#273444', 600: '#202a37', 700: '#18202a', 800: '#0f141a', 900: '#070a0d', 950: '#040506', }, 'gray-light': { DEFAULT: '#d3dce6', 50: '#fcfcfd', 100: '#f5f7f9', 200: '#eff2f6', 300: '#e5eaf0', 400: '#dbe2eb', 500: '#d3dce6', 600: '#9aafc6', 700: '#6382a6', 800: '#415872', 900: '#1f2b37', 950: '#11171d', }, grey: { DEFAULT: '#6b7280', 50: '#f1f2f3', 100: '#e0e2e5', 200: '#c2c5cc', 300: '#a6abb5', 400: '#888e9b', 500: '#6b7280', 600: '#565c67', 700: '#41454e', 800: '#2a2d32', 900: '#151619', 950: '#0c0c0e', }, info: { DEFAULT: '#54b4d3', 50: '#eff8fb', 100: '#dff1f7', 200: '#bae0ed', 300: '#9ad2e5', 400: '#75c2dc', 500: '#54b4d3', 600: '#3098bb', 700: '#25748e', 800: '#184c5d', 900: '#0d2831', 950: '#061418', }, background: { DEFAULT: '#f9fafb', 50: '#ffffff', 100: '#ffffff', 200: '#fcfcfd', 300: '#fcfcfd', 400: '#f9fafb', 500: '#f9fafb', 600: '#bcc7d2', 700: '#8296ab', 800: '#506377', 900: '#29333d', 950: '#141a1f', }, light: { DEFAULT: '#f9fafb', 50: '#ffffff', 100: '#ffffff', 200: '#fcfcfd', 300: '#fcfcfd', 400: '#f9fafb', 500: '#f9fafb', 600: '#bcc7d2', 700: '#8296ab', 800: '#506377', 900: '#29333d', 950: '#141a1f', }, 'light-blue': { DEFAULT: '#03a9f4', 50: '#e6f7ff', 100: '#cdeffe', 200: '#95ddfe', 300: '#63ccfd', 400: '#30bcfc', 500: '#03a9f4', 600: '#0287c5', 700: '#026492', 800: '#014260', 900: '#012332', 950: '#001119', }, 'light-green': { DEFAULT: '#8bc34a', 50: '#f3f9ec', 100: '#e9f4dd', 200: '#d0e7b6', 300: '#badb94', 400: '#a1cf6d', 500: '#8bc34a', 600: '#6fa135', 700: '#547b29', 800: '#37501b', 900: '#1d2a0e', 950: '#0d1306', }, muted: { DEFAULT: '#545964', 50: '#eeeff1', 100: '#dbdde1', 200: '#b7bbc2', 300: '#969ba7', 400: '#727988', 500: '#545964', 600: '#444850', 700: '#33363d', 800: '#212327', 900: '#101113', 950: '#090a0b', }, natural: { DEFAULT: '#737373', 50: '#f2f2f2', 100: '#e3e3e3', 200: '#c7c7c7', 300: '#ababab', 400: '#8f8f8f', 500: '#737373', 600: '#5c5c5c', 700: '#454545', 800: '#2e2e2e', 900: '#171717', 950: '#0d0d0d', }, primary: { DEFAULT: '#1b1b1b', 50: '#e8e8e8', 100: '#d1d1d1', 200: '#a3a3a3', 300: '#757575', 400: '#474747', 500: '#1b1b1b', 600: '#141414', 700: '#0f0f0f', 800: '#0a0a0a', 900: '#050505', 950: '#030303', }, 'primary-accent': { DEFAULT: '#444444', 50: '#ededed', 100: '#d9d9d9', 200: '#b5b5b5', 300: '#8f8f8f', 400: '#696969', 500: '#444444', 600: '#363636', 700: '#292929', 800: '#1c1c1c', 900: '#0d0d0d', 950: '#080808', }, secondary: { DEFAULT: '#fbbf24', 50: '#fff9eb', 100: '#fef2d2', 200: '#fde6aa', 300: '#fdd87d', 400: '#fccb50', 500: '#fbbf24', 600: '#e1a304', 700: '#aa7b03', 800: '#735302', 900: '#372801', 950: '#1e1601', }, success: { DEFAULT: '#0e7235', 50: '#dffbea', 100: '#bbf7d2', 200: '#77eea5', 300: '#33e677', 400: '#16b653', 500: '#0e7235', 600: '#0b5b2a', 700: '#08441f', 800: '#062d15', 900: '#03170a', 950: '#020e06', }, surface: { DEFAULT: '#4f4f4f', 50: '#ededed', 100: '#dbdbdb', 200: '#b8b8b8', 300: '#969696', 400: '#737373', 500: '#4f4f4f', 600: '#404040', 700: '#303030', 800: '#1f1f1f', 900: '#0f0f0f', 950: '#080808', dark: '#424242', }, 'text-secondary': { DEFAULT: '#4f4f4f', 50: '#ededed', 100: '#dbdbdb', 200: '#b8b8b8', 300: '#969696', 400: '#737373', 500: '#4f4f4f', 600: '#404040', 700: '#303030', 800: '#1f1f1f', 900: '#0f0f0f', 950: '#080808', dark: '#424242', }, tertiary: { DEFAULT: '#9fa6b2', 50: '#f7f7f8', 100: '#ebedef', 200: '#d7dadf', 300: '#c6cbd2', 400: '#b3b8c2', 500: '#9fa6b2', 600: '#7a8494', 700: '#5b6371', 800: '#3b404a', 900: '#1e2025', 950: '#101114', }, warning: { DEFAULT: '#e4a11b', 50: '#fcf6e8', 100: '#faecd1', 200: '#f4d9a4', 300: '#efc776', 400: '#e9b449', 500: '#e4a11b', 600: '#b68116', 700: '#896110', 800: '#5b400b', 900: '#2e2005', 950: '#171003', }, error: { DEFAULT: '#800000', 50: '#ffdbdb', 100: '#ffb3b3', 200: '#ff6666', 300: '#ff1a1a', 400: '#cc0000', 500: '#800000', 600: '#660000', 700: '#4d0000', 800: '#330000', 900: '#190000', 950: '#0f0000', }, }, dropShadow: { xs: '0 1px 1px rgb(0 0 0 / 0.02)', }, fontFamily: { sans: [ 'Inter', 'ui-sans-serif', 'system-ui', '-apple-system', 'system-ui', 'Segoe UI', 'Roboto', 'Helvetica Neue', 'Arial', 'Noto Sans', 'sans-serif', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji', ], serif: ['"Inter"', 'serif'], body: [ 'Inter', 'ui-sans-serif', 'system-ui', '-apple-system', 'system-ui', 'Segoe UI', 'Roboto', 'Helvetica Neue', 'Arial', 'Noto Sans', 'sans-serif', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji', ], mono: [ 'ui-monospace', 'SFMono-Regular', 'Menlo', 'Monaco', 'Consolas', 'Liberation Mono', 'Courier New', 'monospace', ], }, fontSize: { xxs: '0.5rem', }, // Defined keyframes keyframes: { spin: { to: { transform: 'rotate(360deg)', }, }, ping: { '75%, 100%': { transform: 'scale(2)', opacity: '0', }, }, pulse: { '50%': { opacity: '0.5', }, }, 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)', }, }, 'fade-in': { '0%': { transform: 'translateY(15pt)', opacity: 0 }, '100%': { transform: 'translateY(0pt)' }, }, 'fade-out': { '0%': { transform: 'translateY(0pt)' }, '100%': { transform: 'translateY(15pt)', opacity: 0 }, }, disappear: { '0%': { opacity: 1, visibility: 'visible' }, '100%': { visibility: 'hidden', opacity: 0 }, }, }, minWidth: { kanban: '28rem', }, screens: { '2xs': '320px', xs: '480px', '3xl': '1600px', '4xl': '1920px', }, spacing: { 128: '32rem', 144: '36rem', }, textDecoration: ['active'], textShadow: { // --tw-shadow-color is not defined in tailwindcss by now sm: '0 0px 2px var(--tw-shadow-color)', DEFAULT: '0 0px 3px var(--tw-shadow-color)', lg: '0 0px 8px var(--tw-shadow-color)', }, transitionProperty: { width: 'width', }, }, fill: ({ theme }) => ({ none: 'none', ...theme('colors'), }), flex: { 1: '1 1 0%', auto: '1 1 auto', initial: '0 1 auto', none: 'none', }, flexBasis: ({ 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%', }), flexGrow: { 0: '0', DEFAULT: '1', }, flexShrink: { 0: '0', DEFAULT: '1', }, fontFamily: { sans: [ '"Inter"', 'serif', 'ui-sans-serif', 'system-ui', 'sans-serif', '"Apple Color Emoji"', '"Segoe UI Emoji"', '"Segoe UI Symbol"', '"Noto Color Emoji"', ], serif: ['"Inter"', 'ui-serif', 'Georgia', 'Cambria', '"Times New Roman"', 'Times', 'serif'], body: ['"Inter"', 'serif'], mono: [ 'ui-monospace', 'SFMono-Regular', 'Menlo', 'Monaco', 'Consolas', '"Liberation Mono"', '"Courier New"', 'monospace', ], }, fontSize: { 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'), gradientColorStopPositions: { '0%': '0%', '5%': '5%', '10%': '10%', '15%': '15%', '20%': '20%', '25%': '25%', '30%': '30%', '35%': '35%', '40%': '40%', '45%': '45%', '50%': '50%', '55%': '55%', '60%': '60%', '65%': '65%', '70%': '70%', '75%': '75%', '80%': '80%', '85%': '85%', '90%': '90%', '95%': '95%', '100%': '100%', }, grayscale: { 0: '0', DEFAULT: '100%', }, 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-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', }, gridRowEnd: { 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', }, gridRowStart: { 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', }, gridTemplateColumns: { none: 'none', subgrid: 'subgrid', 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', subgrid: 'subgrid', 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))', }, 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', svh: '100svh', lvh: '100lvh', dvh: '100dvh', min: 'min-content', max: 'max-content', fit: 'fit-content', }), hueRotate: { 0: '0deg', '15': '15deg', '30': '30deg', '60': '60deg', '90': '90deg', '180': '180deg', }, inset: ({ 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%', full: '100%', }), invert: { 0: '0', DEFAULT: '100%', }, keyframes: { spin: { to: { transform: 'rotate(360deg)', }, }, ping: { '75%, 100%': { transform: 'scale(2)', opacity: '0', }, }, pulse: { '50%': { opacity: '.5', }, }, 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)', }, }, }, letterSpacing: { tighter: '-0.05em', tight: '-0.025em', normal: '0em', wide: '0.025em', wider: '0.05em', widest: '0.1em', }, lineHeight: { '3': '.75rem', '4': '1rem', '5': '1.25rem', '6': '1.5rem', '7': '1.75rem', '8': '2rem', '9': '2.25rem', '10': '2.5rem', loose: '2', none: '1', normal: '1.5', relaxed: '1.625', snug: '1.375', tight: '1.25', }, listStyleType: { none: 'none', disc: 'disc', decimal: 'decimal', }, listStyleImage: { none: 'none', }, margin: ({ theme }) => ({ auto: 'auto', ...theme('spacing'), }), lineClamp: { 1: '1', 2: '2', 3: '3', 4: '4', '5': '5', '6': '6', }, maxHeight: ({ theme }) => ({ ...theme('spacing'), none: 'none', full: '100%', screen: '100vh', svh: '100svh', lvh: '100lvh', dvh: '100dvh', min: 'min-content', max: 'max-content', fit: 'fit-content', }), maxWidth: ({ theme }) => ({ ...theme('spacing'), none: 'none', 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', fit: 'fit-content', prose: '65ch', }), minHeight: ({ theme }) => ({ ...theme('spacing'), full: '100%', screen: '100vh', svh: '100svh', lvh: '100lvh', dvh: '100dvh', min: 'min-content', max: 'max-content', fit: 'fit-content', }), minWidth: ({ theme }) => ({ ...theme('spacing'), full: '100%', min: 'min-content', max: 'max-content', fit: 'fit-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', '15': '0.15', '20': '0.2', '25': '0.25', '30': '0.3', '35': '0.35', '40': '0.4', '45': '0.45', '50': '0.5', '55': '0.55', '60': '0.6', '65': '0.65', '70': '0.7', '75': '0.75', '80': '0.8', '85': '0.85', '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', }, outlineColor: ({ theme }) => theme('colors'), outlineOffset: { 0: '0px', 1: '1px', 2: '2px', 4: '4px', 8: '8px', }, outlineWidth: { 0: '0px', 1: '1px', 2: '2px', 4: '4px', 8: '8px', }, padding: ({ theme }) => theme('spacing'), placeholderColor: ({ theme }) => theme('colors'), placeholderOpacity: ({ theme }) => theme('opacity'), ringColor: ({ theme }) => ({ DEFAULT: theme('colors.primary.500', '#1b1b1b'), ...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: { 0: '0deg', 1: '1deg', 2: '2deg', 3: '3deg', '6': '6deg', 12: '12deg', '45': '45deg', '90': '90deg', '180': '180deg', }, saturate: { 0: '0', 50: '.5', 100: '1', 150: '1.5', 200: '2', }, 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', }, screens: { sm: '640px', md: '768px', lg: '1024px', xl: '1280px', '2xl': '1536px', }, scrollMargin: ({ theme }) => ({ ...theme('spacing'), }), scrollPadding: ({ theme }) => theme('spacing'), sepia: { 0: '0', DEFAULT: '100%', }, skew: { 0: '0deg', 1: '1deg', 2: '2deg', 3: '3deg', '6': '6deg', 12: '12deg', }, space: ({ theme }) => ({ ...theme('spacing'), }), spacing: { '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', '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', '20': '5rem', '24': '6rem', '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', px: '1px', }, stroke: ({ theme }) => ({ none: 'none', ...theme('colors'), }), strokeWidth: { 0: '0', 1: '1', 2: '2', }, supports: {}, data: {}, textColor: ({ theme }) => theme('colors'), textDecoration: ['active'], textDecorationColor: ({ theme }) => theme('colors'), textDecorationThickness: { auto: 'auto', 'from-font': 'from-font', 0: '0px', 1: '1px', 2: '2px', 4: '4px', 8: '8px', }, textIndent: ({ theme }) => ({ ...theme('spacing'), }), textOpacity: ({ theme }) => theme('opacity'), textUnderlineOffset: { auto: 'auto', 0: '0px', 1: '1px', 2: '2px', 4: '4px', 8: '8px', }, 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', }, transitionDelay: { 0: '0s', 75: '75ms', 100: '100ms', 150: '150ms', 200: '200ms', 300: '300ms', 500: '500ms', 700: '700ms', 1000: '1000ms', }, transitionDuration: { DEFAULT: '150ms', 0: '0s', 75: '75ms', 100: '100ms', 150: '150ms', 200: '200ms', 300: '300ms', 500: '500ms', 700: '700ms', 1000: '1000ms', }, transitionProperty: { none: 'none', all: 'all', DEFAULT: 'color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter', colors: 'color, background-color, border-color, text-decoration-color, fill, stroke', opacity: 'opacity', shadow: 'box-shadow', transform: 'transform', width: 'width', }, 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 }) => ({ ...theme('spacing'), '1/2': '50%', '1/3': '33.333333%', '2/3': '66.666667%', '1/4': '25%', '2/4': '50%', '3/4': '75%', full: '100%', }), size: ({ 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%', min: 'min-content', max: 'max-content', fit: 'fit-content', }), 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', svw: '100svw', lvw: '100lvw', dvw: '100dvw', min: 'min-content', max: 'max-content', fit: 'fit-content', }), willChange: { auto: 'auto', scroll: 'scroll-position', contents: 'contents', transform: 'transform', }, zIndex: { auto: 'auto', 0: '0', 10: '10', '20': '20', '30': '30', '40': '40', 50: '50', }, }, plugins: [ // starlightPlugin(), // require('@tailwindcss/typography'), // require('@tailwindcss/aspect-ratio'), // require('flowbite/plugin'), // require('preline/plugin'), // require('./tw-plugin'), typography(), // twPlugin(), ], experimental: { optimizeUniversalDefaults: true, },};EOFPlugin Setup
Section titled “Plugin Setup”cat > tw-plugin.cjs <<EOFconst defaultTheme = require('tailwindcss/defaultTheme');const plugin = require('tailwindcss/plugin');
const { spacing, borderRadius } = defaultTheme;
module.exports = plugin( ({ addBase, theme }) => { addBase({ [['input[type="range"]::-webkit-slider-thumb']]: { height: spacing[4], width: spacing[4], background: theme('colors.primary.DEFAULT'), 'border-radius': borderRadius.full, border: 0, appearance: 'none', '-moz-appearance': 'none', '-webkit-appearance': 'none', cursor: 'pointer', }, [['.dark input[type="range"]::-webkit-slider-thumb']]: { background: theme('colors.primary.400'), }, [['input[type="range"]:disabled::-webkit-slider-thumb']]: { background: theme('colors.neutral.400'), }, [['input[type="range"]:disabled:focus::-webkit-slider-thumb']]: { background: theme('colors.neutral.400'), }, [['input[type="range"]:disabled:active::-webkit-slider-thumb']]: { background: theme('colors.neutral.400'), }, [['.dark input[type="range"]:disabled::-webkit-slider-thumb']]: { background: theme('colors.neutral.500'), }, [['.dark input[type="range"]:disabled:focus::-webkit-slider-thumb']]: { background: theme('colors.neutral.500'), }, [['.dark input[type="range"]:disabled:active::-webkit-slider-thumb']]: { background: theme('colors.neutral.500'), }, [['input[type="range"]::-moz-range-thumb']]: { height: spacing[4], width: spacing[4], background: theme('colors.primary.DEFAULT'), 'border-radius': borderRadius.full, border: 0, appearance: 'none', '-moz-appearance': 'none', '-webkit-appearance': 'none', cursor: 'pointer', }, [['.dark input[type="range"]::-moz-range-thumb']]: { background: theme('colors.primary.400'), }, [['input[type="range"]:disabled::-moz-range-thumb']]: { background: theme('colors.neutral.400'), }, [['.dark input[type="range"]:disabled::-moz-range-thumb']]: { background: theme('colors.neutral.500'), }, [['input[type="range"]::-moz-range-progress']]: { background: theme('colors.primary.600'), }, [['input[type="range"]::-ms-fill-lower']]: { background: theme('colors.primary.600'), }, [['.dark input[type="range"]::-moz-range-progress']]: { background: theme('colors.primary.500'), }, [['.dark input[type="range"]::-ms-fill-lower']]: { background: theme('colors.primary.500'), }, [['input[type="range"]:focus']]: { outline: 'none', }, [['input[type="range"]:focus::-webkit-slider-thumb']]: { background: theme('colors.primary.600'), }, [['input[type="range"]:active::-webkit-slider-thumb']]: { background: theme('colors.primary.700'), }, [['.dark input[type="range"]:focus::-webkit-slider-thumb']]: { background: theme('colors.primary.500'), }, [['.dark input[type="range"]:active::-webkit-slider-thumb']]: { background: theme('colors.primary.600'), }, }); }, { theme: { screens: { '2xs': '320px', xs: '480px', sm: '600px', md: '768px', lg: '1024px', xl: '1280px', '2xl': '1440px', '3xl': '1600px', '4xl': '1920px', ...defaultTheme.screens, }, extend: { fontFamily: { sans: ['"Inter"', 'serif'], serif: ['"Inter"', 'serif'], body: ['"Inter"', 'serif'], mono: ['ui-monospace', 'monospace'], }, boxShadow: { 'twe-primary': '0 0 0 1px rgb(27, 27, 27)', 'te-primary': '0 0 0 1px rgb(27, 27, 27)', 1: '0 0 2px 0 rgba(0, 0, 0, 0.07), 0 1px 1px 0 rgba(0, 0, 0, 0.04)', '1-strong': '0 0 2px 0 rgba(0, 0, 0, 0.16), 0 1px 1px 0 rgba(0, 0, 0, 0.1)', 2: '0 0 3px 0 rgba(0, 0, 0, 0.07), 0 2px 2px 0 rgba(0, 0, 0, 0.04)', '2-strong': '0 0 3px 0 rgba(0, 0, 0, 0.16), 0 2px 2px 0 rgba(0, 0, 0, 0.1)', 3: '0 2px 6px -1px rgba(0, 0, 0, 0.07), 0 6px 18px -1px rgba(0, 0, 0, 0.04)', '3-strong': '0 2px 6px -1px rgba(0, 0, 0, 0.16), 0 6px 18px -1px rgba(0, 0, 0, 0.1)', 4: '0 2px 15px -3px rgba(0, 0, 0, 0.07), 0 10px 20px -2px rgba(0, 0, 0, 0.04)', '4-strong': '0 2px 15px -3px rgba(0, 0, 0, 0.16), 0 10px 20px -2px rgba(0, 0, 0, 0.1)', 5: '0 2px 25px -5px rgba(0, 0, 0, 0.07), 0 25px 21px -5px rgba(0, 0, 0, 0.04)', '5-strong': ' 0 2px 25px -5px rgba(0, 0, 0, 0.16), 0 25px 21px -5px rgba(0, 0, 0, 0.1)', 'twe-inner': 'inset 0 2px 4px 0 #0000000d', 'te-inner': 'inset 0 2px 4px 0 #0000000d', 'primary-1': '0 8px 9px -4px rgba(27, 27, 27, 0.2), 0 4px 18px 0 rgba(27, 27, 27, 0.1)', 'primary-2': '0 8px 9px -4px rgba(27, 27, 27, 0.3), 0 4px 18px 0 rgba(27, 27, 27, 0.2)', 'primary-3': '0 4px 9px -4px #1b1b1b', 'success-1': '0 8px 9px -4px rgba(14, 114, 53, 0.2), 0 4px 18px 0 rgba(14, 114, 53, 0.1)', 'success-2': '0 8px 9px -4px rgba(14, 114, 53, 0.3), 0 4px 18px 0 rgba(14, 114, 53, 0.2)', 'success-3': '0 4px 9px -4px #0e7235', 'danger-1': '0 8px 9px -4px rgba(128, 0, 0, 0.1), 0 4px 18px 0 rgba(128, 0, 0, 0.2)', 'danger-2': '0 8px 9px -4px rgba(128, 0, 0, 0.2), 0 4px 18px 0 rgba(128, 0, 0, 0.3)', 'danger-3': '0 4px 9px -4px #800000', 'warning-1': '0 8px 9px -4px rgba(228, 161, 27, 0.1), 0 4px 18px 0 rgba(228, 161, 27, 0.2)', 'warning-2': '0 8px 9px -4px rgba(228, 161, 27, 0.2), 0 4px 18px 0 rgba(228, 161, 27, 0.3)', 'warning-3': '0 4px 9px -4px #e4a11b', 'info-1': '0 8px 9px -4px rgba(84, 180, 211, 0.1), 0 4px 18px 0 rgba(84, 180, 211, 0.2)', 'info-2': '0 8px 9px -4px rgba(84, 180, 211, 0.2), 0 4px 18px 0 rgba(84, 180, 211, 0.3)', 'info-3': '0 4px 9px -4px #54b4d3', 'light-1': '0 8px 9px -4px rgba(249, 250, 251, 0.05), 0 4px 18px 0 rgba(249, 250, 251, 0.1)', 'light-2': '0 8px 9px -4px rgba(249, 250, 251, 0.2), 0 4px 18px 0 rgba(249, 250, 251, 0.3)', 'light-3': '0 4px 9px -4px #f9fafb', 'dark-1': '0 8px 9px -4px rgba(0, 0, 0, 0.15), 0 4px 18px 0 rgba( 0, 0, 0 , 0.1)', 'dark-2': '0 8px 9px -4px rgba(31, 41, 55, 0.1), 0 4px 18px 0 rgba(31, 41, 55, 0.2)', 'dark-3': '0 4px 9px -4px rgba(31, 41, 55, 0.7)', 'dark-strong': '0 4px 18px -2px rgba(0, 0, 0, 0.7)', 'dark-mild': '0 4px 12px 0 rgba(0, 0, 0, 0.07), 0 2px 4px rgba(0, 0, 0, 0.05)', 'secondary-1': '0 2px 15px -3px rgba(0, 0, 0, 0.04), 0 10px 20px -2px rgba(0, 0, 0, 0.07)', 'secondary-2': '0 8px 9px -4px rgba(227, 235, 247, 0.2), 0 4px 18px 0 rgba(227, 235, 247, 0.3)', 'secondary-3': '0 4px 9px -4px #e3ebf7', 'primary-5': '0 4px 9px -4px rgba(27, 27, 27, 0.5)', checkbox: '0 0 0 13px #1b1b1b', inset: 'inset 0 0 0 1px rgb(27, 27, 27)', select: '0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12)', 'switch-1': '0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12)', 'switch-2': '0 0px 3px 0 rgba(0, 0, 0, 0.07), 0 2px 2px 0 rgba(0, 0, 0, 0.04)', 'switch-3': '3px -1px 0px 13px #1b1b1b', 'notch-1': '-1px 0 0 #1b1b1b, 0 1px 0 0 #1b1b1b, 0 -1px 0 0 #1b1b1b', 'notch-2': '0 1px 0 0 #1b1b1b', 'notch-3': '1px 0 0 #1b1b1b, 0 -1px 0 0 #1b1b1b, 0 1px 0 0 #1b1b1b', 'border-b': 'inset 0 -1px 0 rgba(229, 231, 235)', autofill: 'inset 0 0 0px 1000px rgb(62, 62, 62)', }, keyframes: { 'fade-in': { '0%': { opacity: 0 }, '100%': { opacity: 1 }, }, 'fade-out': { '0%': { opacity: 1 }, '100%': { opacity: 0 }, }, 'fade-in-down': { '0%': { opacity: 0, transform: 'translate3d(0, -100%, 0)', }, '100%': { opacity: 1, transform: 'translate3d(0, 0, 0)', }, }, 'fade-in-left': { '0%': { opacity: 0, transform: 'translate3d(-100%, 0, 0)', }, '100%': { opacity: 1, transform: 'translate3d(0, 0, 0)', }, }, 'fade-in-right': { '0%': { opacity: 0, transform: 'translate3d(100%, 0, 0)', }, '100%': { opacity: 1, transform: 'translate3d(0, 0, 0)', }, }, 'fade-in-up': { '0%': { opacity: 0, transform: 'translate3d(0, 100%, 0)', }, '100%': { opacity: 1, transform: 'translate3d(0, 0, 0)', }, }, 'fade-out-down': { '0%': { opacity: 1, }, '100%': { opacity: 0, transform: 'translate3d(0, 100%, 0)', }, }, 'fade-out-left': { '0%': { opacity: 1, }, '100%': { opacity: 0, transform: 'translate3d(-100%, 0, 0)', }, }, 'fade-out-right': { '0%': { opacity: 1, }, '100%': { opacity: 0, transform: 'translate3d(100%, 0, 0)', }, }, 'fade-out-up': { '0%': { opacity: 1, }, '100%': { opacity: 0, transform: 'translate3d(0, -100%, 0)', }, }, 'slide-in-down': { '0%': { visibility: 'visible', transform: 'translate3d(0, -100%, 0)', }, '100%': { transform: 'translate3d(0, 0, 0)', }, }, 'slide-in-left': { '0%': { visibility: 'visible', transform: 'translate3d(-100%, 0, 0)', }, '100%': { transform: 'translate3d(0, 0, 0)', }, }, 'slide-in-right': { '0%': { visibility: 'visible', transform: 'translate3d(100%, 0, 0)', }, '100%': { transform: 'translate3d(0, 0, 0)', }, }, 'slide-in-up': { '0%': { visibility: 'visible', transform: 'translate3d(0, 100%, 0)', }, '100%': { transform: 'translate3d(0, 0, 0)', }, }, 'slide-out-down': { '0%': { transform: 'translate3d(0, 0, 0)', }, '100%': { visibility: 'hidden', transform: 'translate3d(0, 100%, 0)', }, }, 'slide-out-left': { '0%': { transform: 'translate3d(0, 0, 0)', }, '100%': { visibility: 'hidden', transform: 'translate3d(-100%, 0, 0)', }, }, 'slide-out-right': { '0%': { transform: 'translate3d(0, 0, 0)', }, '100%': { visibility: 'hidden', transform: 'translate3d(100%, 0, 0)', }, }, 'slide-out-up': { '0%': { transform: 'translate3d(0, 0, 0)', }, '100%': { visibility: 'hidden', transform: 'translate3d(0, -100%, 0)', }, }, 'slide-down': { '0%': { transform: 'translate3d(0, 0, 0)', }, '100%': { transform: 'translate3d(0, 100%, 0)', }, }, 'slide-left': { '0%': { transform: 'translate3d(0, 0, 0)', }, '100%': { transform: 'translate3d(-100%, 0, 0)', }, }, 'slide-right': { '0%': { transform: 'translate3d(0, 0, 0)', }, '100%': { transform: 'translate3d(100%, 0, 0)', }, }, 'slide-up': { '0%': { transform: 'translate3d(0, 0, 0)', }, '100%': { transform: 'translate3d(0, -100%, 0)', }, }, 'zoom-in': { '0%': { opacity: 0, transform: 'scale3d(0.3, 0.3, 0.3)', }, '50%': { opacity: 1, }, }, 'zoom-out': { '0%': { opacity: 1, }, '50%': { opacity: 0, transform: 'scale3d(0.3, 0.3, 0.3)', }, '100%': { opacity: 0, }, }, tada: { '0%': { transform: 'scale3d(1, 1, 1)', }, '10%, 20%': { transform: 'scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg)', }, '30%, 50%, 70%, 90%': { transform: 'scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg)', }, '40%, 60%, 80%': { transform: 'scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg)', }, '100%': { transform: 'scale3d(1, 1, 1)', }, }, 'spinner-grow': { '0%': { transform: 'scale(0)', }, '50%': { transform: 'none', opacity: '1', }, }, 'placeholder-wave': { '100%': { maskPosition: '-200% 0%' }, }, 'show-up-clock': { '0%': { opacity: '0', transform: 'scale(0.7)', }, '100%': { opacity: '1', transform: 'scale(1)', }, }, progress: { '0%': { transform: 'translateX(-45%)' }, '100%': { transform: 'translateX(100%)' }, }, 'drop-in': { '0%': { opacity: '0', transform: 'scale(0)', animationTimingFunction: 'cubic-bezier(0.34, 1.61, 0.7, 1)', }, '100%': { opacity: '1', transform: 'scale(1)', }, }, 'drop-out': { '0%': { opacity: '1', transform: 'scale(1)', animationTimingFunction: 'cubic-bezier(0.34, 1.61, 0.7, 1)', }, '100%': { opacity: '0', transform: 'scale(0)' }, }, 'fly-in': { '0%': { opacity: '0', transform: 'scale3d(0.3, 0.3, 0.3)', transitionTimingFunction: 'cubic-bezier(0.215, 0.61, 0.355, 1)', }, '20%': { transform: 'scale3d(1.1, 1.1, 1.1)' }, '40%': { transform: 'scale3d(0.9, 0.9, 0.9)' }, '60%': { opacity: '1', transform: 'scale3d(1.03, 1.03, 1.03)' }, '80%': { transform: 'scale3d(0.97, 0.97, 0.97)' }, '100%': { opacity: '1', transform: 'scale3d(1, 1, 1)' }, }, 'fly-in-up': { '0%': { opacity: '0', transform: 'translate3d(0, 1500px, 0)', transitionTimingFunction: 'cubic-bezier(0.215, 0.61, 0.355, 1)', }, '60%': { opacity: '1', transform: 'translate3d(0, -20px, 0)' }, '75%': { transform: 'translate3d(0, 10px, 0)' }, '90%': { transform: 'translate3d(0, -5px, 0)' }, '100%': { transform: 'translate3d(0, 0, 0)' }, }, 'fly-in-down': { '0%': { opacity: '0', transform: 'translate3d(0, -1500px, 0)', transitionTimingFunction: 'cubic-bezier(0.215, 0.61, 0.355, 1)', }, '60%': { opacity: '1', transform: 'translate3d(0, 25px, 0)' }, '75%': { transform: 'translate3d(0, -10px, 0)' }, '90%': { transform: 'translate3d(0, 5px, 0)' }, '100%': { transform: 'none' }, }, 'fly-in-left': { '0%': { opacity: '0', transform: 'translate3d(1500px, 0, 0)', transitionTimingFunction: 'cubic-bezier(0.215, 0.61, 0.355, 1)', }, '60%': { opacity: '1', transform: 'translate3d(-25px, 0, 0)' }, '75%': { transform: 'translate3d(10px, 0, 0)' }, '90%': { transform: 'translate3d(-5px, 0, 0)' }, '100%': { transform: 'none' }, }, 'fly-in-right': { '0%': { opacity: '0', transform: 'translate3d(-1500px, 0, 0)', transitionTimingFunction: 'cubic-bezier(0.215, 0.61, 0.355, 1)', }, '60%': { opacity: '1', transform: 'translate3d(25px, 0, 0)' }, '75%': { transform: 'translate3d(-10px, 0, 0)' }, '90%': { transform: 'translate3d(5px, 0, 0)' }, '100%': { transform: 'none' }, }, 'fly-out': { '0%': { transitionTimingFunction: 'cubic-bezier(0.215, 0.61, 0.355, 1)', }, '20%': { transform: 'scale3d(0.9, 0.9, 0.9)', }, '50%, 55%': { opacity: '1', transform: 'scale3d(1.1, 1.1, 1.1)', }, '100%': { opacity: '0', transform: 'scale3d(0.3, 0.3, 0.3)', }, }, 'fly-out-up': { '0%': { transitionTimingFunction: 'cubic-bezier(0.215, 0.61, 0.355, 1)', }, '20%': { transform: 'translate3d(0, 10px, 0)', }, '40%, 45%': { opacity: '1', transform: 'translate3d(0, -20px, 0)', }, '100%': { opacity: '0', transform: 'translate3d(0, 2000px, 0)', }, }, 'fly-out-down': { '0%': { transitionTimingFunction: 'cubic-bezier(0.215, 0.61, 0.355, 1)', }, '20%': { transform: 'translate3d(0, -10px, 0)', }, '40%, 45%': { opacity: '1', transform: 'translate3d(0, 20px, 0)', }, '100%': { opacity: '0', transform: 'translate3d(0, -2000px, 0)', }, }, 'fly-out-left': { '0%': { transitionTimingFunction: 'cubic-bezier(0.215, 0.61, 0.355, 1)', }, '20%': { opacity: '1', transform: 'translate3d(-20px, 0, 0)', }, '100%': { opacity: '0', transform: 'translate3d(2000px, 0, 0)', }, }, 'fly-out-right': { '0%': { transitionTimingFunction: 'cubic-bezier(0.215, 0.61, 0.355, 1)', }, '20%': { opacity: '1', transform: 'translate3d(20px, 0, 0)', }, '100%': { opacity: '0', transform: 'translate3d(-2000px, 0, 0)', }, }, 'browse-in': { '0%': { transform: 'scale(0.8) translateZ(0px)', zIndex: '-1' }, '10%': { transform: 'scale(0.8) translateZ(0px)', zIndex: '-1', opacity: '0.7', }, '80%': { transform: 'scale(1.05) translateZ(0px)', zIndex: '999', opacity: '1', }, '100%': { transform: 'scale(1) translateZ(0px)', zIndex: '999' }, }, 'browse-out': { '0%': { transform: 'translateX(0%) rotateY(0deg) rotateX(0deg)', zIndex: '999', }, '50%': { transform: 'translateX(-105%) rotateY(35deg) rotateX(10deg) translateZ(-10px)', zIndex: '-1', }, '80%': { opacity: '1' }, '100%': { zIndex: '-1', opacity: '0', transform: 'translateX(0%) rotateY(0deg) rotateX(0deg) translateZ(-10px)', }, }, 'browse-out-left': { '0%': { transform: 'translateX(0%) rotateY(0deg) rotateX(0deg)', zIndex: '999', }, '50%': { transform: 'translateX(-105%) rotateY(35deg) rotateX(10deg) translateZ(-10px)', zIndex: '-1', }, '80%': { opacity: '1' }, '100%': { zIndex: '-1', opacity: '0', transform: 'translateX(0%) rotateY(0deg) rotateX(0deg) translateZ(-10px)', }, }, 'browse-out-right': { '0%': { transform: 'translateX(0%) rotateY(0deg) rotateX(0deg)', zIndex: '999', }, '50%': { transform: 'translateX(105%) rotateY(35deg) rotateX(10deg) translateZ(-10px)', zIndex: '1', }, '80%': { opacity: '1' }, '100%': { zIndex: '1', opacity: '0', transform: 'translateX(0%) rotateY(0deg) rotateX(0deg) translateZ(-10px)', }, }, jiggle: { '0%': { transform: 'scale3d(1, 1, 1)' }, '30%': { transform: 'scale3d(1.25, 0.75, 1)' }, '40%': { transform: 'scale3d(0.75, 1.25, 1)' }, '50%': { transform: 'scale3d(1.15, 0.85, 1)' }, '65%': { transform: 'scale3d(0.95, 1.05, 1)' }, '75%': { transform: 'scale3d(1.05, 0.95, 1)' }, '100%': { transform: 'scale3d(1, 1, 1)' }, }, flash: { '0%, 50%, 100%': { opacity: '1' }, '25%, 75%': { opacity: '0' }, }, shake: { '0%, 100%': { transform: 'translateX(0)', }, '10%, 30%, 50%, 70%, 90%': { transform: 'translateX(-10px)', }, '20%, 40%, 60%, 80%': { transform: 'translateX(10px)', }, }, glow: { '0%': { backgroundColor: '#fcfcfd' }, '30%': { backgroundColor: '#fff6cd' }, '100%': { backgroundColor: '#fcfcfd' }, }, }, colors: { primary: { DEFAULT: '#1b1b1b', 50: '#e8e8e8', 100: '#d1d1d1', 200: '#a3a3a3', 300: '#757575', 400: '#474747', 500: '#1b1b1b', 600: '#141414', 700: '#0f0f0f', 800: '#0a0a0a', 900: '#050505', 950: '#030303', 'accent-100': '#f0f0f0', 'accent-200': '#e3e3e3', 'accent-300': '#c7c7c7', }, secondary: { DEFAULT: '#fbbf24', 50: '#fff9eb', 100: '#fef2d2', 200: '#fde6aa', 300: '#fdd87d', 400: '#fccb50', 500: '#fbbf24', 600: '#e1a304', 700: '#aa7b03', 800: '#735302', 900: '#372801', 950: '#1e1601', 'accent-300': '#0a0a0a', }, success: { DEFAULT: '#0e7235', 50: '#dffbea', 100: '#bbf7d2', 200: '#77eea5', 300: '#33e677', 400: '#16b653', 500: '#0e7235', 600: '#0b5b2a', 700: '#08441f', 800: '#062d15', 900: '#03170a', 950: '#020e06', 'accent-300': '#4ade80', }, danger: { DEFAULT: '#800000', 50: '#ffdbdb', 100: '#ffb3b3', 200: '#ff6666', 300: '#ff1a1a', 400: '#cc0000', 500: '#800000', 600: '#660000', 700: '#4d0000', 800: '#330000', 900: '#190000', 950: '#0f0000', 'accent-300': '#f87171', }, warning: { DEFAULT: '#e4a11b', 50: '#fcf6e8', 100: '#faecd1', 200: '#f4d9a4', 300: '#efc776', 400: '#e9b449', 500: '#e4a11b', 600: '#b68116', 700: '#896110', 800: '#5b400b', 900: '#2e2005', 950: '#171003', 'accent-300': '#facc15', }, info: { DEFAULT: '#54b4d3', 50: '#eff8fb', 100: '#dff1f7', 200: '#bae0ed', 300: '#9ad2e5', 400: '#75c2dc', 500: '#54b4d3', 600: '#3098bb', 700: '#25748e', 800: '#184c5d', 900: '#0d2831', 950: '#061418', 'accent-300': '#38bdf8', }, background: { DEFAULT: '#f9fafb', 50: '#ffffff', 100: '#ffffff', 200: '#fcfcfd', 300: '#fcfcfd', 400: '#f9fafb', 500: '#f9fafb', 600: '#bcc7d2', 700: '#8296ab', 800: '#506377', 900: '#29333d', 950: '#141a1f', }, light: { DEFAULT: '#f9fafb', 50: '#ffffff', 100: '#ffffff', 200: '#fcfcfd', 300: '#fcfcfd', 400: '#f9fafb', 500: '#f9fafb', 600: '#bcc7d2', 700: '#8296ab', 800: '#506377', 900: '#29333d', 950: '#141a1f', }, 'light-blue': { DEFAULT: '#03a9f4', 50: '#e6f7ff', 100: '#cdeffe', 200: '#95ddfe', 300: '#63ccfd', 400: '#30bcfc', 500: '#03a9f4', 600: '#0287c5', 700: '#026492', 800: '#014260', 900: '#012332', 950: '#001119', }, 'light-green': { DEFAULT: '#8bc34a', 50: '#f3f9ec', 100: '#e9f4dd', 200: '#d0e7b6', 300: '#badb94', 400: '#a1cf6d', 500: '#8bc34a', 600: '#6fa135', 700: '#547b29', 800: '#37501b', 900: '#1d2a0e', 950: '#0d1306', }, muted: { DEFAULT: '#545964', 50: '#eeeff1', 100: '#dbdde1', 200: '#b7bbc2', 300: '#969ba7', 400: '#727988', 500: '#545964', 600: '#444850', 700: '#33363d', 800: '#212327', 900: '#101113', 950: '#090a0b', }, 'primary-accent': { DEFAULT: '#444444', 50: '#ededed', 100: '#d9d9d9', 200: '#b5b5b5', 300: '#8f8f8f', 400: '#696969', 500: '#444444', 600: '#363636', 700: '#292929', 800: '#1c1c1c', 900: '#0d0d0d', 950: '#080808', }, surface: { DEFAULT: '#4f4f4f', 50: '#ededed', 100: '#dbdbdb', 200: '#b8b8b8', 300: '#969696', 400: '#737373', 500: '#4f4f4f', 600: '#404040', 700: '#303030', 800: '#1f1f1f', 900: '#0f0f0f', 950: '#080808', dark: '#424242', }, 'text-secondary': { DEFAULT: '#4f4f4f', 50: '#ededed', 100: '#dbdbdb', 200: '#b8b8b8', 300: '#969696', 400: '#737373', 500: '#4f4f4f', 600: '#404040', 700: '#303030', 800: '#1f1f1f', 900: '#0f0f0f', 950: '#080808', dark: '#424242', }, body: { DEFAULT: '#fff', dark: '#303030', }, }, }, }, },);EOF