Upgrade Guide to Upgrading Tailwind v3 to v4
If you’d like to try upgrading a project from v3 to v4, you can use our upgrade tool to do the vast majority of the heavy lifting for you:
First add the config to your source CSS File. IE:
Section titled “First add the config to your source CSS File. IE:”@config '../tailwind.config.js';@tailwind base;@tailwind components;@tailwind utilities;During a Tailwind upgrade (especially to v4), there are a few config fields that can cause errors or are no longer valid in the same way.
🚫 Common Config Issues in tailwind.config.js (v4+):
Section titled “🚫 Common Config Issues in tailwind.config.js (v4+):”1. presets: []
Section titled “1. presets: []”- Error: Tailwind v4 doesn’t allow an empty array for
presets. - ✅ Fix: Remove the line entirely if you’re not using any custom presets:
// presets: [], ← delete this
2. content: [] is required
Section titled “2. content: [] is required”- Make sure the
contentfield is present and correctly points to your HTML/JS files.content: ["./src/**/*.{html,js}"],
3. corePlugins: {} (if used)
Section titled “3. corePlugins: {} (if used)”- You must not leave it empty. Either remove it or define it properly:
// corePlugins: {}, ← ❌ Don't do thiscorePlugins: {preflight: false, // ✅ Example if disabling Preflight}
4. future: {} and experimental: {}
Section titled “4. future: {} and experimental: {}”- These are deprecated in Tailwind v3+, and will break in v4.
// Remove `future` and `experimental` blocks entirely
5. Plugin config errors
Section titled “5. Plugin config errors”- Ensure all plugins used (like
@tailwindcss/forms, etc.) are compatible with Tailwind v4.
✅ Final Minimal Example:
Section titled “✅ Final Minimal Example:”module.exports = { content: ['./src/**/*.{html,js}'], theme: { extend: {}, }, plugins: [],};The error n.includes is not a function is caused by an invalid usage of the colors function in your tailwind.config.js. Specifically, this line:
colors: ({ colors }) => ({🔥 Problem:
Section titled “🔥 Problem:”In Tailwind v4, theme extensions like colors must return plain objects — you can’t use function signatures like ({ colors }) => ({}) anymore. That destructuring breaks the upgrade tool (and Tailwind itself) because colors is not a function — it’s an object, and that syntax is not supported.
✅ Fix:
Section titled “✅ Fix:”Use Tailwind’s require('tailwindcss/colors') explicitly instead.
Replace:
colors: ({ colors }) => ({With:
const defaultColors = require('tailwindcss/colors');
colors: { ...defaultColors, amber: defaultColors.amber, black: defaultColors.black, // ... all your custom colors (you already define them in the `extend.colors` block — move them there only)}🚀 What You Should Do:
Section titled “🚀 What You Should Do:”-
Remove this entire block from the
theme.colorssection:colors: ({ colors }) => ({ /* ... */ }), -
Move any custom colors into
extend.colorsonly, like you already do:extend: {colors: {primary: { ... },secondary: { ... },// etc.}} -
✅ This is valid:
const colors = require('tailwindcss/colors');module.exports = {theme: {extend: {colors: {primary: { ... },// your custom color scales}}}}
🧹 Bonus Cleanup (Tailwind v4 compatibility):
Section titled “🧹 Bonus Cleanup (Tailwind v4 compatibility):”Also remove:
experimental: { optimizeUniversalDefaults: true;}This is no longer valid in Tailwind v4.
Using the upgrade tool
Section titled “Using the upgrade tool”npx @tailwindcss/upgradeIf you get the message `Git directory is not clean. Please stash or commit your changes before migrating.
│ You may use the --force flag to silence this warning and perform the migration.`
Run
npx @tailwindcss/upgrade --forceThen run:
npm install tailwindcss @tailwindcss/cliBuild Commands
Section titled “Build Commands”"tailwind-watch": "npx tailwindcss -i ./src/input.css -o ./src/output.css --watch","tailwind-build": "npx tailwindcss -i ./src/input.css -o ./src/output.css""tailwind-watch": "npx @tailwindcss/cli -i ./src/input.css -o ./src/output.css --watch","tailwind-build": "npx @tailwindcss/cli -i ./src/input.css -o ./src/output.css"Successful Configs:
Section titled “Successful Configs:”JS Tailwind Config
Section titled “JS Tailwind Config”/** @type {import('tailwindcss').Config} */module.exports = { content: ['./pro/**/*.{html,js}', './E-Commerce/**/*.{html,js}'], plugins: [require('preline/plugin'), require('./tw-plugin')], theme: { boxShadow: { '2xl': '0 25px 50px -12px rgba(0, 0, 0, 0.5)', DEFAULT: '0 1px 3px 0 rgba(0, 0, 0, 0.2), 0 1px 2px -1px rgba(0, 0, 0, 0.2)', inner: 'inset 0 2px 4px 0 rgba(0, 0, 0, 0.1)', lg: '0 10px 15px -3px rgba(0, 0, 0, 0.2), 0 4px 6px -4px rgba(0, 0, 0, 0.2)', md: '0 4px 6px -1px rgba(0, 0, 0, 0.2), 0 2px 4px -2px rgba(0, 0, 0, 0.2)', none: 'none', sm: '0 1px 2px 0 rgba(0, 0, 0, 0.1)', xl: '0 20px 25px -5px rgba(0, 0, 0, 0.2), 0 8px 10px -6px rgba(0, 0, 0, 0.2)', }, dropShadow: { '2xl': '0 25px 25px rgba(0, 0, 0, 0.3)', DEFAULT: ['0 1px 2px rgba(0, 0, 0, 0.2)', '0 1px 1px rgba(0, 0, 0, 0.12)'], lg: ['0 10px 8px rgba(0, 0, 0, 0.08)', '0 4px 3px rgba(0, 0, 0, 0.2)'], md: ['0 4px 3px rgba(0, 0, 0, 0.14)', '0 2px 2px rgba(0, 0, 0, 0.12)'], none: '0 0 #0000', sm: '0 1px 1px rgba(0, 0, 0, 0.1)', xl: ['0 20px 13px rgba(0, 0, 0, 0.06)', '0 8px 5px rgba(0, 0, 0, 0.16)'], }, extend: { borderColor: { DEFAULT: '#a3a3a3', }, fontFamily: { body: [ '"Inter Variable"', '"Inter"', 'ui-sans-serif', 'system-ui', '-apple-system', '"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', ], sans: [ '"Inter"', 'sans-serif', 'ui-sans-serif', 'system-ui', '-apple-system', '"Segoe UI"', '"Roboto"', '"Helvetica Neue"', '"Arial"', '"Noto Sans"', '"Apple Color Emoji"', '"Segoe UI Emoji"', '"Segoe UI Symbol"', '"Noto Color Emoji"', ], serif: [ '"Inter Variable"', 'serif', 'ui-sans-serif', 'system-ui', '-apple-system', '"Segoe UI"', '"Roboto"', '"Helvetica Neue"', '"Arial"', '"Noto Sans"', '"Apple Color Emoji"', '"Segoe UI Emoji"', '"Segoe UI Symbol"', '"Noto Color Emoji"', ], }, ringColor: { DEFAULT: '#1b1b1b', }, screens: { '2xl': '1440px', '2xs': '320px', '3xl': '1600px', '4xl': '1920px', lg: '1024px', md: '801px', sm: '551px', xl: '1261px', xs: '480px', xxs: '320px', }, }, },};JS Plugin:
Section titled “JS Plugin:”const plugin = require('tailwindcss/plugin');const defaultTheme = require('tailwindcss/defaultTheme');
const { spacing, borderRadius } = defaultTheme;
module.exports = plugin( ({ addBase }) => { addBase({ [['input[type="range"]::-webkit-slider-thumb']]: { '-moz-appearance': 'none', '-webkit-appearance': 'none', appearance: 'none', background: '#1b1b1b', border: 0, 'border-radius': borderRadius.full, cursor: 'pointer', height: spacing[4], width: spacing[4], }, [['input[type="range"]:disabled::-webkit-slider-thumb']]: { background: '#8f8f8f', }, [['input[type="range"]:disabled:focus::-webkit-slider-thumb']]: { background: '#8f8f8f', }, [['input[type="range"]:disabled:active::-webkit-slider-thumb']]: { background: '#8f8f8f', }, [['input[type="range"]::-moz-range-thumb']]: { '-moz-appearance': 'none', '-webkit-appearance': 'none', appearance: 'none', background: '#1b1b1b', border: 0, 'border-radius': borderRadius.full, cursor: 'pointer', height: spacing[4], width: spacing[4], }, [['input[type="range"]:disabled::-moz-range-thumb']]: { background: '#8f8f8f', }, [['input[type="range"]::-moz-range-progress']]: { background: '#141414', }, [['input[type="range"]::-ms-fill-lower']]: { background: '#141414', }, [['input[type="range"]:focus']]: { outline: 'none', }, [['input[type="range"]:focus::-webkit-slider-thumb']]: { background: '#141414', }, [['input[type="range"]:active::-webkit-slider-thumb']]: { background: '#0f0f0f', }, }); }, { theme: { extend: { boxShadow: { 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)', autofill: 'inset 0 0 0px 1000px rgb(62, 62, 62)', 'border-b': 'inset 0 -1px 0 rgb(229, 231, 235)', checkbox: '0 0 0 13px #1b1b1b', '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', '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-mild': '0 4px 12px 0 rgba(0, 0, 0, 0.07), 0 2px 4px rgba(0, 0, 0, 0.05)', 'dark-strong': '0 4px 18px -2px rgba(0, 0, 0, .7)', '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', inset: 'inset 0 0 0 1px rgb(27,27,27)', 'light-1': '0 8px 9px -4px rgba(251, 251, 251, 0.05), 0 4px 18px 0 rgba(251, 251, 251, 0.1)', 'light-2': '0 8px 9px -4px rgba(203, 203, 203, 0.2),0 4px 18px 0 rgba(203, 203, 203, 0.3)', 'light-3': '0 4px 9px -4px #cbcbcb', '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', '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', 'primary-5': '0 4px 9px -4px rgba(27, 27, 27, 0.5)', '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(225, 163, 4, 0.2),0 4px 18px 0 rgba(225, 163, 4, 0.3)', 'secondary-3': '0 4px 9px -4px #fbbf24', select: '0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12)', 'success-1': '0 8px 9px -4px rgba(20, 164, 77, 0.2),0 4px 18px 0 rgba(20, 164, 77, 0.1)', 'success-2': '0 8px 9px -4px rgba(20, 164, 77, 0.3),0 4px 18px 0 rgba(20, 164, 77, 0.2)', 'success-3': '0 4px 9px -4px #14a44d', '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', 'twe-inner': 'inset 0 2px 4px 0 #0000000d', 'twe-primary': '0 0 0 1px rgb(27, 27, 27)', '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', }, colors: { accent: { 50: '#fff9eb', 100: '#fef2d2', 200: '#fde6aa', 300: '#fdd87d', 400: '#fccb50', 500: '#fbbf24', 600: '#e1a304', 700: '#aa7b03', 800: '#735302', 900: '#372801', 950: '#1e1601', DEFAULT: '#fbbf24', }, amber: { 50: '#fef5e7', 100: '#fdecce', 200: '#fbd99d', 300: '#f9c56c', 400: '#f7b23b', 500: '#f59e0b', 600: '#c47f08', 700: '#935f06', 800: '#624004', 900: '#312002', 950: '#181001', DEFAULT: '#f59e0b', }, background: { 50: '#ffffff', 100: '#ffffff', 200: '#fcfcfd', 300: '#fcfcfd', 400: '#f9fafb', 500: '#f9fafb', 600: '#bcc7d2', 700: '#8296ab', 800: '#506377', 900: '#29333d', 950: '#141a1f', DEFAULT: '#f9fafb', }, black: { 50: '#e6e6e6', '50-50': 'rgba(0, 0, 0, 0.5)', 100: '#cccccc', 200: '#999999', 300: '#666666', 400: '#333333', 500: '#000000', 600: '#000000', 700: '#000000', 800: '#000000', 900: '#000000', 950: '#000000', DEFAULT: '#000000', }, blue: { 50: '#ebf3fe', 100: '#d8e6fd', 200: '#b1cefb', 300: '#8ab5fa', 400: '#639cf8', 500: '#3b82f6', 600: '#0b60ea', 700: '#0848b0', 800: '#053075', 900: '#03183b', 950: '#010c1d', DEFAULT: '#3b82f6', }, 'blue-gray': { 50: '#f0f3f5', 100: '#dee5e8', 200: '#bdcad1', 300: '#9eb2bc', 400: '#7d98a5', 500: '#607d8b', 600: '#4d6470', 700: '#3a4c54', 800: '#263136', 900: '#13181b', 950: '#0a0e0f', DEFAULT: '#607d8b', }, body: { 50: '#ededed', 100: '#dbdbdb', 200: '#b8b8b8', 300: '#969696', 400: '#737373', 500: '#4f4f4f', 600: '#404040', 700: '#303030', 800: '#1f1f1f', 900: '#0f0f0f', 950: '#080808', dark: '#303030', DEFAULT: '#4f4f4f', }, 'body-dark': { 50: '#ebebeb', 100: '#d6d6d6', 200: '#adadad', 300: '#828282', 400: '#595959', 500: '#303030', 600: '#262626', 700: '#1c1c1c', 800: '#141414', 900: '#0a0a0a', 950: '#050505', DEFAULT: '#303030', }, brown: { 50: '#f4eeec', 100: '#e8ddd9', 200: '#cfb8af', 300: '#b99589', 400: '#a0705f', 500: '#795548', 600: '#604339', 700: '#4a342c', 800: '#30221d', 900: '#1a120f', 950: '#0d0908', DEFAULT: '#795548', }, cyan: { 50: '#e1fafe', 100: '#c8f6fd', 200: '#8debfc', 300: '#56e2fa', 400: '#1bd7f9', 500: '#06b6d4', 600: '#0590a9', 700: '#046e81', 800: '#024854', 900: '#01262d', 950: '#011114', DEFAULT: '#06b6d4', }, danger: { 50: '#ffdbdb', 100: '#ffb3b3', 200: '#ff6666', 300: '#ff1a1a', 400: '#cc0000', 500: '#800000', 600: '#660000', 700: '#4d0000', 800: '#330000', 900: '#190000', 950: '#0f0000', 'accent-300': '#ff3333', DEFAULT: '#800000', }, dark: { 50: '#e5eaf0', 100: '#c8d2e0', 200: '#93a7c2', 300: '#5c7aa3', 400: '#3f536f', 500: '#1f2937', 600: '#1a222e', 700: '#121821', 800: '#0d1117', 900: '#06070a', 950: '#040507', DEFAULT: '#1f2937', }, 'deep-orange': { 50: '#ffefeb', 100: '#ffdcd1', 200: '#ffbda8', 300: '#ff997a', 400: '#ff764d', 500: '#ff5722', 600: '#e63600', 700: '#ad2800', 800: '#751b00', 900: '#380d00', 950: '#1f0700', DEFAULT: '#ff5722', }, 'deep-purple': { 50: '#f0ecf9', 100: '#dfd4f2', 200: '#c2aee5', 300: '#a283d8', 400: '#855ccb', 500: '#673ab7', 600: '#532f93', 700: '#3e226c', 800: '#2a174a', 900: '#140b23', 950: '#0b0613', DEFAULT: '#673ab7', }, disabled: { 50: '#f4f5f6', 100: '#ebedef', 200: '#d8dadf', 300: '#c4c8cf', 400: '#b0b6bf', 500: '#9ca3af', 600: '#788192', 700: '#59616e', 800: '#3b4049', 900: '#1e2025', 950: '#0e0f11', DEFAULT: '#9ca3af', }, emerald: { 50: '#e3fdf4', 100: '#c7fae9', 200: '#8ef5d3', 300: '#56f0bd', 400: '#1eeca7', 500: '#10b981', 600: '#0d9668', 700: '#0a714e', 800: '#064b34', 900: '#03261a', 950: '#02130d', DEFAULT: '#10b981', }, error: { 50: '#ffdbdb', 100: '#ffb3b3', 200: '#ff6666', 300: '#ff1a1a', 400: '#cc0000', 500: '#800000', 600: '#660000', 700: '#4d0000', 800: '#330000', 900: '#190000', 950: '#0f0000', DEFAULT: '#800000', }, fuchsia: { 50: '#fbecfd', 100: '#f7d9fc', 200: '#efb4f9', 300: '#e88ef5', 400: '#e069f2', 500: '#d946ef', 600: '#c613e1', 700: '#940fa9', 800: '#630a71', 900: '#310538', 950: '#19021c', DEFAULT: '#d946ef', }, gray: { 50: '#f1f2f3', 100: '#e0e2e5', 200: '#c2c5cc', 300: '#a6abb5', 400: '#888e9b', 500: '#6b7280', 600: '#565c67', 700: '#41454e', 800: '#2a2d32', 900: '#151619', 950: '#0c0c0e', DEFAULT: '#6b7280', }, 'gray-dark': { 50: '#e5eaf0', 100: '#cbd5e1', 200: '#97abc4', 300: '#6784a8', 400: '#455c78', 500: '#273444', 600: '#202a37', 700: '#18202a', 800: '#0f141a', 900: '#070a0d', 950: '#040506', DEFAULT: '#273444', }, 'gray-light': { 50: '#fcfcfd', 100: '#f5f7f9', 200: '#eff2f6', 300: '#e5eaf0', 400: '#dbe2eb', 500: '#d3dce6', 600: '#9aafc6', 700: '#6382a6', 800: '#415872', 900: '#1f2b37', 950: '#11171d', DEFAULT: '#d3dce6', }, green: { 50: '#e9fbf0', 100: '#cff7de', 200: '#9fefbc', 300: '#6fe69b', 400: '#40de7a', 500: '#22c55e', 600: '#1b9d4b', 700: '#147538', 800: '#0d4e25', 900: '#072713', 950: '#04160a', DEFAULT: '#22c55e', }, grey: { 50: '#f1f2f3', 100: '#e0e2e5', 200: '#c2c5cc', 300: '#a6abb5', 400: '#888e9b', 500: '#6b7280', 600: '#565c67', 700: '#41454e', 800: '#2a2d32', 900: '#151619', 950: '#0c0c0e', DEFAULT: '#6b7280', }, indigo: { 50: '#f1f1fe', 100: '#dedffc', 200: '#c2c3fa', 300: '#a1a3f7', 400: '#8183f4', 500: '#6366f1', 600: '#2326eb', 700: '#1114bb', 800: '#0b0d7e', 900: '#05063d', 950: '#030321', DEFAULT: '#6366f1', }, info: { 50: '#eff8fb', 100: '#dff1f7', 200: '#bae0ed', 300: '#9ad2e5', 400: '#75c2dc', 500: '#54b4d3', 600: '#3098bb', 700: '#25748e', 800: '#184c5d', 900: '#0d2831', 950: '#061418', 'accent-300': '#91cee3', DEFAULT: '#54b4d3', }, light: { 50: '#ffffff', 100: '#ffffff', 200: '#fcfcfd', 300: '#fcfcfd', 400: '#f9fafb', 500: '#f9fafb', 600: '#bcc7d2', 700: '#8296ab', 800: '#506377', 900: '#29333d', 950: '#141a1f', DEFAULT: '#f9fafb', }, 'light-blue': { 50: '#e6f7ff', 100: '#cdeffe', 200: '#95ddfe', 300: '#63ccfd', 400: '#30bcfc', 500: '#03a9f4', 600: '#0287c5', 700: '#026492', 800: '#014260', 900: '#012332', 950: '#001119', DEFAULT: '#03a9f4', }, 'light-green': { 50: '#f3f9ec', 100: '#e9f4dd', 200: '#d0e7b6', 300: '#badb94', 400: '#a1cf6d', 500: '#8bc34a', 600: '#6fa135', 700: '#547b29', 800: '#37501b', 900: '#1d2a0e', 950: '#0d1306', DEFAULT: '#8bc34a', }, lime: { 50: '#f2fce3', 100: '#e7facc', 200: '#d0f49a', 300: '#b8ef67', 400: '#9fe930', 500: '#84cc16', 600: '#68a111', 700: '#507c0d', 800: '#355309', 900: '#1b2904', 950: '#0c1202', DEFAULT: '#84cc16', }, muted: { 50: '#eeeff1', 100: '#dbdde1', 200: '#b7bbc2', 300: '#969ba7', 400: '#727988', 500: '#545964', 600: '#444850', 700: '#33363d', 800: '#212327', 900: '#101113', 950: '#090a0b', DEFAULT: '#545964', }, natural: { 50: '#f2f2f2', 100: '#e3e3e3', 200: '#c7c7c7', 300: '#ababab', 400: '#8f8f8f', 500: '#737373', 600: '#5c5c5c', 700: '#454545', 800: '#2e2e2e', 900: '#171717', 950: '#0d0d0d', DEFAULT: '#737373', }, 'nerden-dark': { 50: '#e8e8e8', 100: '#d1d1d1', 200: '#a1a1a1', 300: '#737373', 400: '#454545', 500: '#151515', 600: '#121212', 700: '#0d0d0d', 800: '#080808', 900: '#050505', 950: '#030303', DEFAULT: '#151515', }, neutral: { 50: '#f2f2f2', 100: '#e3e3e3', 200: '#c7c7c7', 300: '#ababab', 400: '#8f8f8f', 500: '#737373', 600: '#5c5c5c', 700: '#454545', 800: '#2e2e2e', 900: '#171717', 950: '#0d0d0d', DEFAULT: '#737373', }, orange: { 50: '#fef0e6', 100: '#fee4d2', 200: '#fdc7a1', 300: '#fbac74', 400: '#fa8f42', 500: '#f97316', 600: '#d15a05', 700: '#9f4504', 800: '#682d03', 900: '#371801', 950: '#190b01', DEFAULT: '#f97316', }, pink: { 50: '#fdedf5', 100: '#fbdaeb', 200: '#f7b5d6', 300: '#f390c2', 400: '#f06bad', 500: '#ec4899', 600: '#de177a', 700: '#a6115c', 800: '#6f0c3d', 900: '#37061f', 950: '#1c030f', DEFAULT: '#ec4899', }, primary: { 50: '#e8e8e8', 100: '#d1d1d1', 200: '#a3a3a3', 300: '#757575', 400: '#474747', 500: '#1b1b1b', 600: '#141414', 700: '#0f0f0f', 800: '#0a0a0a', 900: '#050505', 950: '#030303', 'accent-100': '#d9d9d9', 'accent-200': '#b0b0b0', 'accent-300': '#8a8a8a', DEFAULT: '#1b1b1b', }, 'primary-accent': { 50: '#ededed', 100: '#d9d9d9', 200: '#b5b5b5', 300: '#8f8f8f', 400: '#696969', 500: '#444444', 600: '#363636', 700: '#292929', 800: '#1c1c1c', 900: '#0d0d0d', 950: '#080808', DEFAULT: '#444444', }, purple: { 50: '#f8f0fe', 100: '#eeddfd', 200: '#dcbbfc', 300: '#cb99fa', 400: '#ba77f9', 500: '#a855f7', 600: '#8815f4', 700: '#6609be', 800: '#44067f', 900: '#22033f', 950: '#120222', DEFAULT: '#a855f7', }, red: { 50: '#fdecec', 100: '#fcd9d9', 200: '#f9b4b4', 300: '#f58e8e', 400: '#f26969', 500: '#ef4444', 600: '#e11313', 700: '#a90f0f', 800: '#710a0a', 900: '#380505', 950: '#1c0202', DEFAULT: '#ef4444', }, rose: { 50: '#feecef', 100: '#fdd8de', 200: '#fbb2be', 300: '#f88b9d', 400: '#f6657d', 500: '#f43f5e', 600: '#e80d32', 700: '#ae0a25', 800: '#740719', 900: '#3a030c', 950: '#1d0206', DEFAULT: '#f43f5e', }, secondary: { 50: '#fff9eb', 100: '#fef2d2', 200: '#fde6aa', 300: '#fdd87d', 400: '#fccb50', 500: '#fbbf24', 600: '#e1a304', 700: '#aa7b03', 800: '#735302', 900: '#372801', 950: '#1e1601', 'accent-300': '#fdd573', DEFAULT: '#fbbf24', }, sky: { 50: '#e7f6fe', 100: '#cfeefc', 200: '#9adbf9', 300: '#6acaf6', 400: '#3ab8f3', 500: '#0ea5e9', 600: '#0b84bc', 700: '#08628c', 800: '#05405b', 900: '#032230', 950: '#011118', DEFAULT: '#0ea5e9', }, slate: { 50: '#f0f2f4', 100: '#dee2e8', 200: '#c1c8d2', 300: '#a0abbb', 400: '#8291a5', 500: '#64748b', 600: '#515e71', 700: '#3c4553', 800: '#292f38', 900: '#13161b', 950: '#0b0c0f', DEFAULT: '#64748b', }, stone: { 50: '#f1f0ef', 100: '#e4e3e1', 200: '#cac6c4', 300: '#afaaa6', 400: '#958e89', 500: '#78716c', 600: '#615b57', 700: '#484441', 800: '#302d2b', 900: '#181716', 950: '#0b0a0a', DEFAULT: '#78716c', }, success: { 50: '#dffbea', 100: '#bbf7d2', 200: '#77eea5', 300: '#33e677', 400: '#16b653', 500: '#0e7235', 600: '#0b5b2a', 700: '#08441f', 800: '#062d15', 900: '#03170a', 950: '#020e06', 'accent-300': '#49e986', DEFAULT: '#0e7235', }, surface: { 50: '#ededed', 100: '#dbdbdb', 200: '#b8b8b8', 300: '#969696', 400: '#737373', 500: '#4f4f4f', 600: '#404040', 700: '#303030', 800: '#1f1f1f', 900: '#0f0f0f', 950: '#080808', dark: '#424242', DEFAULT: '#4f4f4f', }, teal: { 50: '#e3fcf9', 100: '#c8f9f3', 200: '#91f3e8', 300: '#59eddc', 400: '#22e7d0', 500: '#14b8a6', 600: '#109384', 700: '#0c6e63', 800: '#084a42', 900: '#042521', 950: '#021210', DEFAULT: '#14b8a6', }, tertiary: { 50: '#f7f7f8', 100: '#ebedef', 200: '#d7dadf', 300: '#c6cbd2', 400: '#b3b8c2', 500: '#9fa6b2', 600: '#7a8494', 700: '#5b6371', 800: '#3b404a', 900: '#1e2025', 950: '#101114', DEFAULT: '#9fa6b2', }, text: { 50: '#e8e8e8', 100: '#d1d1d1', 200: '#a1a1a1', 300: '#737373', 400: '#454545', 500: '#151515', 600: '#121212', 700: '#0d0d0d', 800: '#080808', 900: '#050505', 950: '#030303', DEFAULT: '#151515', }, 'text-secondary': { 50: '#ededed', 100: '#dbdbdb', 200: '#b8b8b8', 300: '#969696', 400: '#737373', 500: '#4f4f4f', 600: '#404040', 700: '#303030', 800: '#1f1f1f', 900: '#0f0f0f', 950: '#080808', DEFAULT: '#4f4f4f', }, violet: { 50: '#f5f1fe', 100: '#e7ddfd', 200: '#d2c0fc', 300: '#ba9efa', 400: '#a27df8', 500: '#8b5cf6', 600: '#5c1cf2', 700: '#410bc1', 800: '#2c0782', 900: '#15033f', 950: '#0b0222', DEFAULT: '#8b5cf6', }, warning: { 50: '#fcf6e8', 100: '#faecd1', 200: '#f4d9a4', 300: '#efc776', 400: '#e9b449', 500: '#e4a11b', 600: '#b68116', 700: '#896110', 800: '#5b400b', 900: '#2e2005', 950: '#171003', 'accent-300': '#eec677', DEFAULT: '#e4a11b', }, white: { 50: '#ffffff', 100: '#ffffff', 200: '#ffffff', 300: '#ffffff', 400: '#ffffff', 500: '#ffffff', 600: '#cccccc', 700: '#999999', 800: '#666666', 900: '#333333', 950: '#1a1a1a', DEFAULT: '#ffffff', }, yellow: { 50: '#fef8e6', 100: '#fdf1ce', 200: '#fbe297', 300: '#fad566', 400: '#f8c630', 500: '#eab308', 600: '#bb8e06', 700: '#8f6c05', 800: '#5e4703', 900: '#312502', 950: '#191301', DEFAULT: '#eab308', }, zinc: { 50: '#f2f2f3', 100: '#e2e2e4', 200: '#c5c5c9', 300: '#aaaab1', 400: '#8d8d96', 500: '#71717a', 600: '#5b5b62', 700: '#45454a', 800: '#2c2c30', 900: '#161618', 950: '#0c0c0d', DEFAULT: '#71717a', }, }, fontFamily: { body: [ '"Inter Variable"', '"Inter"', 'ui-sans-serif', 'system-ui', '-apple-system', '"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', ], sans: [ '"Inter"', 'sans-serif', 'ui-sans-serif', 'system-ui', '-apple-system', '"Segoe UI"', '"Roboto"', '"Helvetica Neue"', '"Arial"', '"Noto Sans"', '"Apple Color Emoji"', '"Segoe UI Emoji"', '"Segoe UI Symbol"', '"Noto Color Emoji"', ], serif: [ '"Inter Variable"', 'serif', 'ui-sans-serif', 'system-ui', '-apple-system', '"Segoe UI"', '"Roboto"', '"Helvetica Neue"', '"Arial"', '"Noto Sans"', '"Apple Color Emoji"', '"Segoe UI Emoji"', '"Segoe UI Symbol"', '"Noto Color Emoji"', ], }, keyframes: { 'browse-in': { '0%': { transform: 'scale(0.8) translateZ(0px)', zIndex: '-1' }, '10%': { opacity: '0.7', transform: 'scale(0.8) translateZ(0px)', zIndex: '-1', }, '80%': { opacity: '1', transform: 'scale(1.05) translateZ(0px)', zIndex: '999', }, '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%': { opacity: '0', transform: 'translateX(0%) rotateY(0deg) rotateX(0deg) translateZ(-10px)', zIndex: '-1', }, }, '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%': { opacity: '0', transform: 'translateX(0%) rotateY(0deg) rotateX(0deg) translateZ(-10px)', zIndex: '-1', }, }, '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%': { opacity: '0', transform: 'translateX(0%) rotateY(0deg) rotateX(0deg) translateZ(-10px)', zIndex: '1', }, }, 'drop-in': { '0%': { animationTimingFunction: 'cubic-bezier(0.34, 1.61, 0.7, 1)', opacity: '0', transform: 'scale(0)', }, '100%': { opacity: '1', transform: 'scale(1)', }, }, 'drop-out': { '0%': { animationTimingFunction: 'cubic-bezier(0.34, 1.61, 0.7, 1)', opacity: '1', transform: 'scale(1)', }, '100%': { opacity: '0', transform: 'scale(0)' }, }, 'fade-in': { '0%': { opacity: 0 }, '100%': { opacity: 1 }, }, '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': { '0%': { opacity: 1 }, '100%': { opacity: 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)', }, }, flash: { '0%, 50%, 100%': { opacity: '1' }, '25%, 75%': { opacity: '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-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-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-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-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)', }, }, '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)', }, }, glow: { '0%': { backgroundColor: '#fcfcfd' }, '30%': { backgroundColor: '#fff6cd' }, '100%': { backgroundColor: '#fcfcfd' }, }, 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)' }, }, 'placeholder-wave': { '100%': { maskPosition: '-200% 0%' }, }, progress: { '0%': { transform: 'translateX(-45%)' }, '100%': { transform: 'translateX(100%)' }, }, shake: { '0%, 100%': { transform: 'translateX(0)', }, '10%, 30%, 50%, 70%, 90%': { transform: 'translateX(-10px)', }, '20%, 40%, 60%, 80%': { transform: 'translateX(10px)', }, }, 'show-up-clock': { '0%': { opacity: '0', transform: 'scale(0.7)', }, '100%': { opacity: '1', transform: 'scale(1)', }, }, 'slide-down': { '0%': { transform: 'translate3d(0, 0, 0)', }, '100%': { transform: 'translate3d(0, 100%, 0)', }, }, 'slide-in-down': { '0%': { transform: 'translate3d(0, -100%, 0)', visibility: 'visible', }, '100%': { transform: 'translate3d(0, 0, 0)', }, }, 'slide-in-left': { '0%': { transform: 'translate3d(-100%, 0, 0)', visibility: 'visible', }, '100%': { transform: 'translate3d(0, 0, 0)', }, }, 'slide-in-right': { '0%': { transform: 'translate3d(100%, 0, 0)', visibility: 'visible', }, '100%': { transform: 'translate3d(0, 0, 0)', }, }, 'slide-in-up': { '0%': { transform: 'translate3d(0, 100%, 0)', visibility: 'visible', }, '100%': { transform: 'translate3d(0, 0, 0)', }, }, 'slide-left': { '0%': { transform: 'translate3d(0, 0, 0)', }, '100%': { transform: 'translate3d(-100%, 0, 0)', }, }, 'slide-out-down': { '0%': { transform: 'translate3d(0, 0, 0)', }, '100%': { transform: 'translate3d(0, 100%, 0)', visibility: 'hidden', }, }, 'slide-out-left': { '0%': { transform: 'translate3d(0, 0, 0)', }, '100%': { transform: 'translate3d(-100%, 0, 0)', visibility: 'hidden', }, }, 'slide-out-right': { '0%': { transform: 'translate3d(0, 0, 0)', }, '100%': { transform: 'translate3d(100%, 0, 0)', visibility: 'hidden', }, }, 'slide-out-up': { '0%': { transform: 'translate3d(0, 0, 0)', }, '100%': { transform: 'translate3d(0, -100%, 0)', visibility: 'hidden', }, }, '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)', }, }, 'spinner-grow': { '0%': { transform: 'scale(0)', }, '50%': { opacity: '1', transform: 'none', }, }, 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)', }, }, '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, }, }, }, }, screens: { xs: '480px', ...defaultTheme.screens, }, }, },);