Tailwind CSS config
This is Ravenbright - Tailwind CSS config file. Explore the live demo on Codepen or Tailwind Play.
Play around with Ravenbright tokens in Tailwind CSS
Play with Ravenbright tokens/*
! tailwindcss v3.2.4 | MIT License | https://tailwindcss.com
*/
/*! purgecss start ignore */
/*! Ravenbright Design Tokens [1.0.0] [https://ravenbrightcss.com/docs/css-variables/overview] [Apache License 2.0] [https://github.com/ravenbrightdesign/ravenbrighttokens/blob/main/LICENSE.md] */
/*! purgecss end ignore */
module.exports = {
content: ["./src/**/*.{html,js,css}"],
theme: {
colors: {
white: "var(--rbrh-white)",
transparent: "transparent",
black: "var(--rbrh-black)",
gray: {
50: "var(--rbrh-gray-50)",
100: "var(--rbrh-gray-100)",
200: "var(--rbrh-gray-200)",
300: "var(--rbrh-gray-300)",
400: "var(--rbrh-gray-400)",
500: "var(--rbrh-gray-500)",
600: "var(--rbrh-gray-600)",
700: "var(--rbrh-gray-700)",
800: "var(--rbrh-gray-800)",
900: "var(--rbrh-gray-900)",
},
green: {
50: "var(--rbrh-green-50)",
100: "var(--rbrh-green-100)",
200: "var(--rbrh-green-200)",
300: "var(--rbrh-green-300)",
400: "var(--rbrh-green-400)",
500: "var(--rbrh-green-500)",
600: "var(--rbrh-green-600)",
700: "var(--rbrh-green-700)",
800: "var(--rbrh-green-800)",
900: "var(--rbrh-green-900)",
},
lime: {
50: "var(--rbrh-lime-50)",
100: "var(--rbrh-lime-100)",
200: "var(--rbrh-lime-200)",
300: "var(--rbrh-lime-300)",
400: "var(--rbrh-lime-400)",
500: "var(--rbrh-lime-500)",
600: "var(--rbrh-lime-600)",
700: "var(--rbrh-lime-700)",
800: "var(--rbrh-lime-800)",
900: "var(--rbrh-lime-900)",
},
cyan: {
50: "var(--rbrh-cyan-50)",
100: "var(--rbrh-cyan-100)",
200: "var(--rbrh-cyan-200)",
300: "var(--rbrh-cyan-300)",
400: "var(--rbrh-cyan-400)",
500: "var(--rbrh-cyan-500)",
600: "var(--rbrh-cyan-600)",
700: "var(--rbrh-cyan-700)",
800: "var(--rbrh-cyan-800)",
900: "var(--rbrh-cyan-900)",
},
teal: {
50: "var(--rbrh-teal-50)",
100: "var(--rbrh-teal-100)",
200: "var(--rbrh-teal-200)",
300: "var(--rbrh-teal-300)",
400: "var(--rbrh-teal-400)",
500: "var(--rbrh-teal-500)",
600: "var(--rbrh-teal-600)",
700: "var(--rbrh-teal-700)",
800: "var(--rbrh-teal-800)",
900: "var(--rbrh-teal-900)",
},
red: {
50: "var(--rbrh-red-50)",
100: "var(--rbrh-red-100)",
200: "var(--rbrh-red-200)",
300: "var(--rbrh-red-300)",
400: "var(--rbrh-red-400)",
500: "var(--rbrh-red-500)",
600: "var(--rbrh-red-600)",
700: "var(--rbrh-red-700)",
800: "var(--rbrh-red-800)",
900: "var(--rbrh-red-900)",
},
magenta: {
50: "var(--rbrh-magenta-50)",
100: "var(--rbrh-magenta-100)",
200: "var(--rbrh-magenta-200)",
300: "var(--rbrh-magenta-300)",
400: "var(--rbrh-magenta-400)",
500: "var(--rbrh-magenta-500)",
600: "var(--rbrh-magenta-600)",
700: "var(--rbrh-magenta-700)",
800: "var(--rbrh-magenta-800)",
900: "var(--rbrh-magenta-900)",
},
orange: {
50: "var(--rbrh-orange-50)",
100: "var(--rbrh-orange-100)",
200: "var(--rbrh-orange-200)",
300: "var(--rbrh-orange-300)",
400: "var(--rbrh-orange-400)",
500: "var(--rbrh-orange-500)",
600: "var(--rbrh-orange-600)",
700: "var(--rbrh-orange-700)",
800: "var(--rbrh-orange-800)",
900: "var(--rbrh-orange-900)",
},
yellow: {
50: "var(--rbrh-yellow-50)",
100: "var(--rbrh-yellow-100)",
200: "var(--rbrh-yellow-200)",
300: "var(--rbrh-yellow-300)",
400: "var(--rbrh-yellow-400)",
500: "var(--rbrh-yellow-500)",
600: "var(--rbrh-yellow-600)",
700: "var(--rbrh-yellow-700)",
800: "var(--rbrh-yellow-800)",
900: "var(--rbrh-yellow-900)",
},
blue: {
50: "var(--rbrh-blue-50)",
100: "var(--rbrh-blue-100)",
200: "var(--rbrh-blue-200)",
300: "var(--rbrh-blue-300)",
400: "var(--rbrh-blue-400)",
500: "var(--rbrh-blue-500)",
600: "var(--rbrh-blue-600)",
700: "var(--rbrh-blue-700)",
800: "var(--rbrh-blue-800)",
900: "var(--rbrh-blue-900)",
},
sky: {
50: "var(--rbrh-sky-50)",
100: "var(--rbrh-sky-100)",
200: "var(--rbrh-sky-200)",
300: "var(--rbrh-sky-300)",
400: "var(--rbrh-sky-400)",
500: "var(--rbrh-sky-500)",
600: "var(--rbrh-sky-600)",
700: "var(--rbrh-sky-700)",
800: "var(--rbrh-sky-800)",
900: "var(--rbrh-sky-900)",
},
purple: {
50: "var(--rbrh-purple-50)",
100: "var(--rbrh-purple-100)",
200: "var(--rbrh-purple-200)",
300: "var(--rbrh-purple-300)",
400: "var(--rbrh-purple-400)",
500: "var(--rbrh-purple-500)",
600: "var(--rbrh-purple-600)",
700: "var(--rbrh-purple-700)",
800: "var(--rbrh-purple-800)",
900: "var(--rbrh-purple-900)",
},
indigo: {
50: "var(--rbrh-indigo-50)",
100: "var(--rbrh-indigo-100)",
200: "var(--rbrh-indigo-200)",
300: "var(--rbrh-indigo-300)",
400: "var(--rbrh-indigo-400)",
500: "var(--rbrh-indigo-500)",
600: "var(--rbrh-indigo-600)",
700: "var(--rbrh-indigo-700)",
800: "var(--rbrh-indigo-800)",
900: "var(--rbrh-indigo-900)",
},
violet: {
50: "var(--rbrh-violet-50)",
100: "var(--rbrh-violet-100)",
200: "var(--rbrh-violet-200)",
300: "var(--rbrh-violet-300)",
400: "var(--rbrh-violet-400)",
500: "var(--rbrh-violet-500)",
600: "var(--rbrh-violet-600)",
700: "var(--rbrh-violet-700)",
800: "var(--rbrh-violet-800)",
900: "var(--rbrh-violet-900)",
},
},
extend: {
fontSize: {
"2xs": ["var(--rbrh-font-size-xxs)", "var(--rbrh-line-h-xxs)"],
xs: ["var(--rbrh-font-size-xs)", "var(--rbrh-line-h-xs)"],
sm: ["var(--rbrh-font-size-sm)", "var(--rbrh-line-h-sm)"],
md: ["var(--rbrh-font-size-md)", "var(--rbrh-line-h-md)"],
lg: ["var(--rbrh-font-size-lg)", "var(--rbrh-line-h-lg)"],
xl: ["var(--rbrh-font-size-xl)", "var(--rbrh-line-h-xl)"],
"2xl": ["var(--rbrh-font-size-2xl)", "var(--rbrh-line-h-2xl)"],
"3xl": ["var(--rbrh-font-size-3xl)", "var(--rbrh-line-h-3xl)"],
"4xl": ["var(--rbrh-font-size-4xl)", "var(--rbrh-line-h-4xl)"],
"5xl": ["var(--rbrh-font-size-5xl)", "var(--rbrh-line-h-5xl)"],
"6xl": ["var(--rbrh-font-size-6xl)", "var(--rbrh-line-h-6xl)"],
"7xl": ["var(--rbrh-font-size-7xl)", "var(--rbrh-line-h-7xl)"],
},
boxShadow: {
xl: "var(--rbrh-shadow-xl)",
lg: "var(--rbrh-shadow-lg)",
md: "var(--rbrh-shadow-md)",
sm: "var(--rbrh-shadow-sm)",
xs: "var(--rbrh-shadow-xs)",
"inset-md": "var(--rbrh-shadow-inset-md)",
"inset-sm": "var(--rbrh-shadow-inset-sm)",
"inset-xs": "var(--rbrh-shadow-inset-xs)",
},
borderRadius: {
circle: "var(--rbrh-radius-circle)",
xl: "var(--rbrh-radius-xl)",
lg: "var(--rbrh-radius-lg)",
md: "var(--rbrh-radius-md)",
sm: "var(--rbrh-radius-sm)",
xs: "var(--rbrh-radius-xs)",
},
},
fontFamily: {
sans: "var(--rbrh-font-family-sans)",
serif: "var(--rbrh-font-family-serif)",
},
letterSpacing: {
xl: "var(--rbrh-letter-spacing-xl)",
lg: "var(--rbrh-letter-spacing-lg)",
md: "var(--rbrh-letter-spacing-md)",
sm: "var(--rbrh-letter-spacing-sm)",
xs: "var(--rbrh-letter-spacing-xs)",
},
screens: {
xs: "12rem",
sm: "28rem",
md: "40rem",
lg: "67.5rem",
xl: "87.5rem",
"2xl": "100rem",
},
spacing: {
0: "var(--rbrh-spacing-0)",
1: "var(--rbrh-spacing-1)",
2: "var(--rbrh-spacing-2)",
3: "var(--rbrh-spacing-3)",
4: "var(--rbrh-spacing-4)",
5: "var(--rbrh-spacing-5)",
6: "var(--rbrh-spacing-6)",
7: "var(--rbrh-spacing-7)",
8: "var(--rbrh-spacing-8)",
9: "var(--rbrh-spacing-9)",
10: "var(--rbrh-spacing-10)",
12: "var(--rbrh-spacing-12)",
14: "var(--rbrh-spacing-14)",
16: "var(--rbrh-spacing-16)",
18: "var(--rbrh-spacing-18)",
20: "var(--rbrh-spacing-20)",
22: "var(--rbrh-spacing-22)",
24: "var(--rbrh-spacing-24)",
32: "var(--rbrh-spacing-32)",
36: "var(--rbrh-spacing-36)",
40: "var(--rbrh-spacing-40)",
44: "var(--rbrh-spacing-44)",
48: "var(--rbrh-spacing-48)",
52: "var(--rbrh-spacing-52)",
56: "var(--rbrh-spacing-56)",
60: "var(--rbrh-spacing-60)",
64: "var(--rbrh-spacing-64)",
72: "var(--rbrh-spacing-72)",
80: "var(--rbrh-spacing-80)",
96: "var(--rbrh-spacing-96)",
128: "var(--rbrh-spacing-128)",
160: "var(--rbrh-spacing-160)",
192: "var(--rbrh-spacing-192)",
},
},
};