What is Tailwind Quantum preset?
Overview
Tailwind CSS is a utility-first CSS framework designed to enable users to create applications faster and easier.
One of the main advantages of using Tailwind CSS is that it promotes consistency in design, which can make it easier for users to build and maintain their applications over time. Additionally, because Tailwind CSS is utility-first-based, it can help users to be more productive without having to write lots of custom CSS code. Besides, Tailwind CSS also uses a Mobile-First approach to design, which makes it well-suited for building responsive applications that work well and compatible with a wide range of devices and screen sizes.
Tailwind Quantum preset
The presets section in tailwind.config.js allows you to specify Quantum's custom base configuration built upon on the Design System foundations instead of using Tailwind’s default base configuration.
It acts as a merge between the default tailwind configuration and our Quantum configuration, making it easy to package up a set of Quantum customizations that you’d like to reuse.
//tailwind.config.js
module.exports = {
// ...
presets: [require('@qtm/tailwind-preset')],
// Project-specific customizations
theme: {
//...
},
};
The Tailwind Quantum preset @qtm/tailwind-preset will override the default Tailwind configuration theme options such as screens, colors, spacing, fontSize, fontFamily, fontWeight, boxShadow to redefine anything related to the Quantum visual design.
This will completely replace Tailwind’s default configuration for the default colors, spacing, fontSize, fontFamily, fontWeight, boxShadow so none of these default utilities will be generated. All other utilities such as flex or text alignement for example are still generated.
info
For example, text-pink-500 is not generated anymore but text-primary-500 is generated and related to our Quantum color palette.
With margins, m-4 is not generated anymore but m-m is generated and related to our Quantum spacing scale.
w-9xl, h-9xl, etc. is generated because the spacing scale is inherited by the padding, margin, width, height, maxHeight, gap, inset, space, and translate core plugins.
Learning more about Tailwind Quantum preset override
module.exports = {
"theme": {
"screens": {
- "sm": "640px",
- "md": "768px",
- "lg": "1024px",
- "xl": "1280px",
- "2xl": "1536px"
+ "xxsmall": {
+ "min": "0px"
+ },
+ "xsmall": {
+ "min": "360px"
+ },
+ "small": {
+ "min": "640px"
+ },
+ "medium": {
+ "min": "768px"
+ },
+ "large": {
+ "min": "992px"
+ },
+ "xlarge": {
+ "min": "1280px"
+ }
},
"colors": {
- "transparent": "transparent",
- "current": "currentColor",
- "black": "#000",
+ "black": {
+ "5": "var(--color-black-5)",
+ "10": "var(--color-black-10)",
+ "20": "var(--color-black-20)",
+ "30": "var(--color-black-30)",
+ "40": "var(--color-black-40)",
+ "50": "var(--color-black-50)",
+ "60": "var(--color-black-60)",
+ "70": "var(--color-black-70)",
+ "80": "var(--color-black-80)",
+ "90": "var(--color-black-90)",
+ "100": "var(--color-black-100)"
+ }
- "white": "#fff",
+ "white": {
+ "5": "var(--color-white-5)",
+ "10": "var(--color-white-10)",
+ "20": "var(--color-white-20)",
+ "30": "var(--color-white-30)",
+ "40": "var(--color-white-40)",
+ "50": "var(--color-white-50)",
+ "60": "var(--color-white-60)",
+ "70": "var(--color-white-70)",
+ "80": "var(--color-white-80)",
+ "90": "var(--color-white-90)",
+ "100": "var(--color-white-100)"
+ }
- "gray": {
- "50": "#f9fafb",
- "100": "#f3f4f6",
- "200": "#e5e7eb",
- "300": "#d1d5db",
- "400": "#9ca3af",
- "500": "#6b7280",
- "600": "#4b5563",
- "700": "#374151",
- "800": "#1f2937",
- "900": "#111827"
- },
"red": {
- "50": "#fef2f2",
+ "50": "var(--color-dark-red-50)",
- "100": "#fee2e2",
+ "100": "var(--color-dark-red-100)",
- "200": "#fecaca",
+ "200": "var(--color-dark-red-200)",
- "300": "#fca5a5",
+ "300": "var(--color-dark-red-300)",
- "400": "#f87171",
+ "400": "var(--color-dark-red-400)",
- "500": "#ef4444",
+ "500": "var(--color-dark-red-500)",
- "600": "#dc2626",
+ "600": "var(--color-dark-red-600)",
- "700": "#b91c1c",
+ "700": "var(--color-dark-red-700)",
- "800": "#991b1b",
+ "800": "var(--color-dark-red-800)",
- "900": "#7f1d1d"
+ "900": "var(--color-dark-red-900)"
},
"yellow": {
- "50": "#fffbeb",
+ "50": "var(--color-yellow-50)",
- "100": "#fef3c7",
+ "100": "var(--color-yellow-100)",
- "200": "#fde68a",
+ "200": "var(--color-yellow-200)",
- "300": "#fcd34d",
+ "300": "var(--color-yellow-300)",
- "400": "#fbbf24",
+ "400": "var(--color-yellow-400)",
- "500": "#f59e0b",
+ "500": "var(--color-yellow-500)",
- "600": "#d97706",
+ "600": "var(--color-yellow-600)",
- "700": "#b45309",
+ "700": "var(--color-yellow-700)",
- "800": "#92400e",
+ "800": "var(--color-yellow-800)",
- "900": "#78350f"
+ "900": "var(--color-yellow-900)"
},
"green": {
- "50": "#ecfdf5",
+ "50": "var(--color-green-50)",
- "100": "#d1fae5",
+ "100": "var(--color-green-100)",
- "200": "#a7f3d0",
+ "200": "var(--color-green-200)",
- "300": "#6ee7b7",
+ "300": "var(--color-green-300)",
- "400": "#34d399",
+ "400": "var(--color-green-400)",
- "500": "#10b981",
+ "500": "var(--color-green-500)",
- "600": "#059669",
+ "600": "var(--color-green-600)",
- "700": "#047857",
+ "700": "var(--color-green-700)",
- "800": "#065f46",
+ "800": "var(--color-green-800)",
- "900": "#064e3b"
+ "900": "var(--color-green-900)"
},
- "blue": {
- "50": "#eff6ff",
- "100": "#dbeafe",
- "200": "#bfdbfe",
- "300": "#93c5fd",
- "400": "#60a5fa",
- "500": "#3b82f6",
- "600": "#2563eb",
- "700": "#1d4ed8",
- "800": "#1e40af",
- "900": "#1e3a8a"
- },
- "indigo": {
- "50": "#eef2ff",
- "100": "#e0e7ff",
- "200": "#c7d2fe",
- "300": "#a5b4fc",
- "400": "#818cf8",
- "500": "#6366f1",
- "600": "#4f46e5",
- "700": "#4338ca",
- "800": "#3730a3",
- "900": "#312e81"
- },
"purple": {
- "50": "#f5f3ff",
+ "50": "var(--color-purple-50)",
- "100": "#ede9fe",
+ "100": "var(--color-purple-100)",
- "200": "#ddd6fe",
+ "200": "var(--color-purple-200)",
- "300": "#c4b5fd",
+ "300": "var(--color-purple-300)",
- "400": "#a78bfa",
+ "400": "var(--color-purple-400)",
- "500": "#8b5cf6",
+ "500": "var(--color-purple-500)",
- "600": "#7c3aed",
+ "600": "var(--color-purple-600)",
- "700": "#6d28d9",
+ "700": "var(--color-purple-700)",
- "800": "#5b21b6",
+ "800": "var(--color-purple-800)",
- "900": "#4c1d95"
+ "900": "var(--color-purple-900)"
},
- "pink": {
- "50": "#fdf2f8",
- "100": "#fce7f3",
- "200": "#fbcfe8",
- "300": "#f9a8d4",
- "400": "#f472b6",
- "500": "#ec4899",
- "600": "#db2777",
- "700": "#be185d",
- "800": "#9d174d",
- "900": "#831843"
- },
+ "primary": {
+ "50": "var(--color-primary-50)",
+ "100": "var(--color-primary-100)",
+ "200": "var(--color-primary-200)",
+ "300": "var(--color-primary-300)",
+ "400": "var(--color-primary-400)",
+ "500": "var(--color-primary-500)",
+ "600": "var(--color-primary-600)",
+ "700": "var(--color-primary-700)",
+ "800": "var(--color-primary-800)",
+ "900": "var(--color-primary-900)"
+ },
+ "lightblue": {
+ "50": "var(--color-lightblue-50)",
+ "100": "var(--color-lightblue-100)",
+ "200": "var(--color-lightblue-200)",
+ "300": "var(--color-lightblue-300)",
+ "400": "var(--color-lightblue-400)",
+ "500": "var(--color-lightblue-500)",
+ "600": "var(--color-lightblue-600)",
+ "700": "var(--color-lightblue-700)",
+ "800": "var(--color-lightblue-800)",
+ "900": "var(--color-lightblue-900)"
+ },
+ "orange": {
+ "50": "var(--color-orange-50)",
+ "100": "var(--color-orange-100)",
+ "200": "var(--color-orange-200)",
+ "300": "var(--color-orange-300)",
+ "400": "var(--color-orange-400)",
+ "500": "var(--color-orange-500)",
+ "600": "var(--color-orange-600)",
+ "700": "var(--color-orange-700)",
+ "800": "var(--color-orange-800)",
+ "900": "var(--color-orange-900)"
+ },
+ "green": {
+ "50": "var(--color-green-50)",
+ "100": "var(--color-green-100)",
+ "200": "var(--color-green-200)",
+ "300": "var(--color-green-300)",
+ "400": "var(--color-green-400)",
+ "500": "var(--color-green-500)",
+ "600": "var(--color-green-600)",
+ "700": "var(--color-green-700)",
+ "800": "var(--color-green-800)",
+ "900": "var(--color-green-900)"
+ },
+ "bluegrey": {
+ "25": "var(--color-bluegrey-25)",
+ "50": "var(--color-bluegrey-50)",
+ "100": "var(--color-bluegrey-100)",
+ "200": "var(--color-bluegrey-200)",
+ "300": "var(--color-bluegrey-300)",
+ "400": "var(--color-bluegrey-400)",
+ "500": "var(--color-bluegrey-500)",
+ "600": "var(--color-bluegrey-600)",
+ "700": "var(--color-bluegrey-700)",
+ "800": "var(--color-bluegrey-800)",
+ "850": "var(--color-bluegrey-850)",
+ "900": "var(--color-bluegrey-900)"
+ },
+ "dark": {
+ "primary": {
+ "50": "var(--color-dark-primary-50)",
+ "100": "var(--color-dark-primary-100)",
+ "200": "var(--color-dark-primary-200)",
+ "300": "var(--color-dark-primary-300)",
+ "400": "var(--color-dark-primary-400)",
+ "500": "var(--color-dark-primary-500)",
+ "600": "var(--color-dark-primary-600)",
+ "700": "var(--color-dark-primary-700)",
+ "800": "var(--color-dark-primary-800)",
+ "900": "var(--color-dark-primary-900)"
+ },
+ "green": {
+ "50": "var(--color-dark-green-50)",
+ "100": "var(--color-dark-green-100)",
+ "200": "var(--color-dark-green-200)",
+ "300": "var(--color-dark-green-300)",
+ "400": "var(--color-dark-green-400)",
+ "500": "var(--color-dark-green-500)",
+ "600": "var(--color-dark-green-600)",
+ "700": "var(--color-dark-green-700)",
+ "800": "var(--color-dark-green-800)",
+ "900": "var(--color-dark-green-900)"
+ },
+ "red": {
+ "50": "var(--color-dark-red-50)",
+ "100": "var(--color-dark-red-100)",
+ "200": "var(--color-dark-red-200)",
+ "300": "var(--color-dark-red-300)",
+ "400": "var(--color-dark-red-400)",
+ "500": "var(--color-dark-red-500)",
+ "600": "var(--color-dark-red-600)",
+ "700": "var(--color-dark-red-700)",
+ "800": "var(--color-dark-red-800)",
+ "900": "var(--color-dark-red-900)"
+ },
+ "orange": {
+ "50": "var(--color-dark-orange-50)",
+ "100": "var(--color-dark-orange-100)",
+ "200": "var(--color-dark-orange-200)",
+ "300": "var(--color-dark-orange-300)",
+ "400": "var(--color-dark-orange-400)",
+ "500": "var(--color-dark-orange-500)",
+ "600": "var(--color-dark-orange-600)",
+ "700": "var(--color-dark-orange-700)",
+ "800": "var(--color-dark-orange-800)",
+ "900": "var(--color-dark-orange-900)"
+ }
+ },
+ "bluegreen": {
+ "50": "var(--color-bluegreen-50)",
+ "100": "var(--color-bluegreen-100)",
+ "200": "var(--color-bluegreen-200)",
+ "300": "var(--color-bluegreen-300)",
+ "400": "var(--color-bluegreen-400)",
+ "500": "var(--color-bluegreen-500)",
+ "600": "var(--color-bluegreen-600)",
+ "700": "var(--color-bluegreen-700)",
+ "800": "var(--color-bluegreen-800)",
+ "900": "var(--color-bluegreen-900)"
+ }
},
"spacing": {
- "0": "0px",
- "1": "0.25rem",
- "2": "0.5rem",
- "3": "0.75rem",
- "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",
- "0.5": "0.125rem",
- "1.5": "0.375rem",
- "2.5": "0.625rem",
- "3.5": "0.875rem"
+ "none": "var(--spacing-none)",
+ "3xs": "var(--spacing-3xs)",
+ "xxs": "var(--spacing-xxs)",
+ "xs": "var(--spacing-xs)",
+ "s": "var(--spacing-s)",
+ "m": "var(--spacing-m)",
+ "l": "var(--spacing-l)",
+ "xl": "var(--spacing-xl)",
+ "xxl": "var(--spacing-xxl)",
+ "3xl": "var(--spacing-3xl)",
+ "4xl": "var(--spacing-4xl)",
+ "5xl": "var(--spacing-5xl)",
+ "6xl": "var(--spacing-6xl)",
+ "7xl": "var(--spacing-7xl)",
+ "8xl": "var(--spacing-8xl)",
+ "9xl": "var(--spacing-9xl)",
+ "10xl": "var(--spacing-10xl)",
+ "11xl": "var(--spacing-11xl)",
+ "12xl": "var(--spacing-12xl)",
+ "13xl": "var(--spacing-13xl)",
+ "14xl": "var(--spacing-14xl)",
+ "15xl": "var(--spacing-15xl)",
+ "16xl": "var(--spacing-16xl)",
+ "17xl": "var(--spacing-17xl)",
+ "18xl": "var(--spacing-18xl)",
+ "19xl": "var(--spacing-19xl)",
+ "20xl": "var(--spacing-20xl)",
+ "21xl": "var(--spacing-21xl)",
+ "22xl": "var(--spacing-22xl)",
+ "23xl": "var(--spacing-23xl)",
+ "24xl": "var(--spacing-24xl)",
+ "25xl": "var(--spacing-25xl)",
+ "26xl": "var(--spacing-26xl)",
+ "27xl": "var(--spacing-27xl)"
},
"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"
+ "xs-strong": "var(--shadow-xs-strong)",
+ "xs-light": "var(--shadow-xs-light)",
+ "xs-ultralight": "var(--shadow-xs-ultralight)",
+ "s-strong": "var(--shadow-s-strong)",
+ "s-light": "var(--shadow-s-light)",
+ "s-ultralight": "var(--shadow-s-ultralight)",
+ "m-strong": "var(--shadow-m-strong)",
+ "m-light": "var(--shadow-m-light)",
+ "m-ultralight": "var(--shadow-m-ultralight)",
+ "l-strong": "var(--shadow-l-strong)",
+ "l-light": "var(--shadow-l-light)",
+ "l-ultralight": "var(--shadow-l-ultralight)",
+ "xl-strong": "var(--shadow-xl-strong)",
+ "xl-light": "var(--shadow-xl-light)",
+ "xl-ultralight": "var(--shadow-xl-ultralight)",
},
"fontFamily": {
- "sans": [
- "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"
- ]
+ "roboto": "var(--font-family-roboto)",
+ "roboto-mono": "var(--font-family-roboto-mono)",
},
"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"
- }
- ]
+ "scale-1": [
+ "var(--font-scale-1-size)",
+ "var(--font-scale-1-line-height)",
+ ],
+ "scale-2": [
+ "var(--font-scale-2-size)",
+ "var(--font-scale-2-line-height)",
+ ],
+ "scale-3": [
+ "var(--font-scale-3-size)",
+ "var(--font-scale-3-line-height)",
+ ],
+ "scale-4": [
+ "var(--font-scale-4-size)",
+ "var(--font-scale-4-line-height)",
+ ],
+ "scale-5": [
+ "var(--font-scale-5-size)",
+ "var(--font-scale-5-line-height)",
+ ],
+ "scale-6": [
+ "var(--font-scale-6-size)",
+ "var(--font-scale-6-line-height)",
+ ],
+ "scale-7": [
+ "var(--font-scale-7-size)",
+ "var(--font-scale-7-line-height)",
+ ],
+ "scale-8": [
+ "var(--font-scale-8-size)",
+ "var(--font-scale-8-line-height)",
+ ],
+ "scale-9": [
+ "var(--font-scale-9-size)",
+ "var(--font-scale-9-line-height)",
+ ],
+ "scale-10": [
+ "var(--font-scale-10-size)",
+ "var(--font-scale-10-line-height)",
+ ],
},
"fontWeight": {
- "thin": "100",
+ "thin": "var(--font-weight-thin)",
- "extralight": "200",
- "light": "300",
+ "light": "var(--font-weight-light)",
- "normal": "400",
- "medium": "500",
+ "medium": "var(--font-weight-medium)",
- "semibold": "600",
- "bold": "700",
+ "bold": "var(--font-weight-bold)",
- "extrabold": "800",
- "black": "900"
+ "black": "var(--font-weight-black)",
+ "regular": "var(--font-weight-regular)",
},
"boxShadow": [
- "responsive",
- "group-hover",
- "focus-within",
- "hover",
- "focus"
+ "xs-strong": "var(--shadow-xs-strong)",
+ "xs-light": "var(--shadow-xs-light)",
+ "xs-ultralight": "var(--shadow-xs-ultralight)",
+ "s-strong": "var(--shadow-s-strong)",
+ "s-light": "var(--shadow-s-light)",
+ "s-ultralight": "var(--shadow-s-ultralight)",
+ "m-strong": "var(--shadow-m-strong)",
+ "m-light": "var(--shadow-m-light)",
+ "m-ultralight": "var(--shadow-m-ultralight)",
+ "l-strong": "var(--shadow-l-strong)",
+ "l-light": "var(--shadow-l-light)",
+ "l-ultralight": "var(--shadow-l-ultralight)",
+ "xl-strong": "var(--shadow-xl-strong)",
+ "xl-light": "var(--shadow-xl-light)",
+ "xl-ultralight": "var(--shadow-xl-ultralight)",
],
+ "extend": {
+ "inset": {
+ "0": 0,
+ },
+ "lineHeight": {
+ "inherit": "inherit",
+ },
+ "width": {
+ "fit": "fit-content",
+ },
+ },
};