121 lines
3.6 KiB
TypeScript
121 lines
3.6 KiB
TypeScript
const colors = require("tailwindcss/colors");
|
|
const {
|
|
toRGB,
|
|
withOpacityValue,
|
|
} = require("./tailwind-config-helper");
|
|
|
|
/** @type {import('tailwindcss').Config} */
|
|
export default {
|
|
content: [
|
|
"./index.html",
|
|
"./src/**/*.{vue,js,ts,jsx,tsx}",
|
|
],
|
|
darkMode: "class", // or 'media' or 'class'
|
|
theme: {
|
|
screens: {
|
|
'sm': '640px',
|
|
// => @media (min-width: 640px) { ... }
|
|
|
|
'md': '768px',
|
|
// => @media (min-width: 768px) { ... }
|
|
|
|
'lg': '1024px',
|
|
// => @media (min-width: 1024px) { ... }
|
|
|
|
'xl': '1280px',
|
|
// => @media (min-width: 1280px) { ... }
|
|
|
|
'2xl': '1536px',
|
|
// => @media (min-width: 1536px) { ... }
|
|
},
|
|
extend: {
|
|
colors: {
|
|
rgb: toRGB({
|
|
inherit: colors.inherit,
|
|
current: colors.current,
|
|
transparent: colors.transparent,
|
|
black: colors.black,
|
|
white: colors.white,
|
|
zinc: colors.zinc,
|
|
red: colors.red,
|
|
orange: colors.orange,
|
|
amber: colors.amber,
|
|
yellow: colors.yellow,
|
|
lime: colors.lime,
|
|
green: colors.green,
|
|
emerald: colors.emerald,
|
|
teal: colors.teal,
|
|
cyan: colors.cyan,
|
|
blue: colors.blue,
|
|
indigo: colors.indigo,
|
|
violet: colors.violet,
|
|
purple: colors.purple,
|
|
fuchsia: colors.fuchsia,
|
|
pink: colors.pink,
|
|
rose: colors.rose,
|
|
sky: colors.sky,
|
|
stone: colors.stone,
|
|
neutral: colors.neutral,
|
|
gray: colors.gray,
|
|
slate: colors.slate,
|
|
}),
|
|
primary: withOpacityValue("--color-primary"),
|
|
secondary: withOpacityValue("--color-secondary"),
|
|
success: withOpacityValue("--color-success"),
|
|
info: withOpacityValue("--color-info"),
|
|
warning: withOpacityValue("--color-warning"),
|
|
pending: withOpacityValue("--color-pending"),
|
|
danger: withOpacityValue("--color-danger"),
|
|
light: withOpacityValue("--color-light"),
|
|
dark: withOpacityValue("--color-dark"),
|
|
slate: {
|
|
50: withOpacityValue("--color-slate-50"),
|
|
100: withOpacityValue("--color-slate-100"),
|
|
200: withOpacityValue("--color-slate-200"),
|
|
300: withOpacityValue("--color-slate-300"),
|
|
400: withOpacityValue("--color-slate-400"),
|
|
500: withOpacityValue("--color-slate-500"),
|
|
600: withOpacityValue("--color-slate-600"),
|
|
700: withOpacityValue("--color-slate-700"),
|
|
800: withOpacityValue("--color-slate-800"),
|
|
900: withOpacityValue("--color-slate-900"),
|
|
},
|
|
darkmode: {
|
|
50: withOpacityValue("--color-darkmode-50"),
|
|
100: withOpacityValue("--color-darkmode-100"),
|
|
200: withOpacityValue("--color-darkmode-200"),
|
|
300: withOpacityValue("--color-darkmode-300"),
|
|
400: withOpacityValue("--color-darkmode-400"),
|
|
500: withOpacityValue("--color-darkmode-500"),
|
|
600: withOpacityValue("--color-darkmode-600"),
|
|
700: withOpacityValue("--color-darkmode-700"),
|
|
800: withOpacityValue("--color-darkmode-800"),
|
|
900: withOpacityValue("--color-darkmode-900"),
|
|
},
|
|
},
|
|
fontFamily: {
|
|
roboto: ["Roboto"],
|
|
},
|
|
container: {
|
|
center: true,
|
|
},
|
|
maxWidth: {
|
|
"1/4": "25%",
|
|
"1/2": "50%",
|
|
"3/4": "75%",
|
|
},
|
|
strokeWidth: {
|
|
0.5: 0.5,
|
|
1.5: 1.5,
|
|
2.5: 2.5,
|
|
},
|
|
},
|
|
},
|
|
variants: {
|
|
extend: {
|
|
boxShadow: ["dark"],
|
|
},
|
|
},
|
|
plugins: [require("@tailwindcss/forms")],
|
|
}
|