You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
83 lines
2.6 KiB
83 lines
2.6 KiB
/** @type {import('tailwindcss').Config} */
|
|
|
|
const defaultTheme = require("tailwindcss/defaultTheme");
|
|
|
|
// Custom color with css variable color in __theme_color.scss
|
|
function customColors(cssVar) {
|
|
return ({ opacityVariable, opacityValue }) => {
|
|
if (opacityValue !== undefined) {
|
|
return `rgba(var(${cssVar}), ${opacityValue})`;
|
|
}
|
|
if (opacityVariable !== undefined) {
|
|
return `rgba(var(${cssVar}), var(${opacityVariable}, 1))`;
|
|
}
|
|
return `rgb(var(${cssVar}))`;
|
|
};
|
|
}
|
|
|
|
module.exports = {
|
|
content: ["./src/**/*.{js,jsx,ts,tsx}", "./public/index.html"],
|
|
darkMode: "class",
|
|
theme: {
|
|
container: {
|
|
center: true,
|
|
padding: {
|
|
DEFAULT: "1rem",
|
|
"2xl": "128px",
|
|
},
|
|
},
|
|
// fontFamily: {
|
|
// display: ["var(--font-display)", ...defaultTheme.fontFamily.sans],
|
|
// body: ["var(--font-body)", ...defaultTheme.fontFamily.sans],
|
|
// },
|
|
|
|
extend: {
|
|
colors: {
|
|
primary: {
|
|
50: customColors("--c-primary-50"),
|
|
100: customColors("--c-primary-100"),
|
|
200: customColors("--c-primary-200"),
|
|
300: customColors("--c-primary-300"),
|
|
400: customColors("--c-primary-400"),
|
|
500: customColors("--c-primary-500"),
|
|
6000: customColors("--c-primary-600"),
|
|
700: customColors("--c-primary-700"),
|
|
800: customColors("--c-primary-800"),
|
|
900: customColors("--c-primary-900"),
|
|
},
|
|
secondary: {
|
|
50: customColors("--c-secondary-50"),
|
|
100: customColors("--c-secondary-100"),
|
|
200: customColors("--c-secondary-200"),
|
|
300: customColors("--c-secondary-300"),
|
|
400: customColors("--c-secondary-400"),
|
|
500: customColors("--c-secondary-500"),
|
|
6000: customColors("--c-secondary-600"),
|
|
700: customColors("--c-secondary-700"),
|
|
800: customColors("--c-secondary-800"),
|
|
900: customColors("--c-secondary-900"),
|
|
},
|
|
neutral: {
|
|
50: customColors("--c-neutral-50"),
|
|
100: customColors("--c-neutral-100"),
|
|
200: customColors("--c-neutral-200"),
|
|
300: customColors("--c-neutral-300"),
|
|
400: customColors("--c-neutral-400"),
|
|
500: customColors("--c-neutral-500"),
|
|
6000: customColors("--c-neutral-600"),
|
|
700: customColors("--c-neutral-700"),
|
|
800: customColors("--c-neutral-800"),
|
|
900: customColors("--c-neutral-900"),
|
|
},
|
|
},
|
|
},
|
|
},
|
|
variants: {
|
|
extend: {},
|
|
},
|
|
plugins: [
|
|
require("@tailwindcss/typography"),
|
|
require("@tailwindcss/forms"),
|
|
require("@tailwindcss/aspect-ratio"),
|
|
],
|
|
};
|