Files
next-gdrive-index/tailwind.config.js
T
2023-09-11 04:42:02 +07:00

105 lines
2.9 KiB
JavaScript

const defaultColors = require("tailwindcss/colors");
const colors = {
inherit: "inherit",
transparent: "transparent",
white: "#ffffff",
black: "#000000",
primary: defaultColors.neutral,
accent: {
50: "rgb(var(--accent-50) / <alpha-value>)",
100: "rgb(var(--accent-100) / <alpha-value>)",
200: "rgb(var(--accent-200) / <alpha-value>)",
300: "rgb(var(--accent-300) / <alpha-value>)",
400: "rgb(var(--accent-400) / <alpha-value>)",
500: "rgb(var(--accent-500) / <alpha-value>)",
600: "rgb(var(--accent-600) / <alpha-value>)",
700: "rgb(var(--accent-700) / <alpha-value>)",
800: "rgb(var(--accent-800) / <alpha-value>)",
900: "rgb(var(--accent-900) / <alpha-value>)",
950: "rgb(var(--accent-950) / <alpha-value>)",
},
success: {
...defaultColors.emerald,
main: defaultColors.emerald[600],
hover: defaultColors.emerald[500],
active: defaultColors.emerald[700],
text: defaultColors.emerald[50],
},
warning: {
...defaultColors.amber,
main: defaultColors.amber[600],
hover: defaultColors.amber[500],
active: defaultColors.amber[700],
text: defaultColors.amber[50],
},
danger: {
...defaultColors.red,
main: defaultColors.red[600],
hover: defaultColors.red[500],
active: defaultColors.red[700],
text: defaultColors.red[50],
},
info: {
...defaultColors.blue,
main: defaultColors.blue[600],
hover: defaultColors.blue[500],
active: defaultColors.blue[700],
text: defaultColors.blue[50],
},
};
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
"./src/pages/**/*.{js,ts,jsx,tsx}",
"./src/components/**/*.{js,ts,jsx,tsx}",
"./src/app/**/*.{js,ts,jsx,tsx}",
],
darkMode: "class",
theme: {
colors,
extend: {
minHeight: {
dynamic: "100dvh",
},
minWidth: {
dynamic: "100dvw",
},
height: {
dynamic: "100dvh",
},
width: {
dynamic: "100dvw",
},
screens: {
mobile: "320px",
tablet: "768px",
desktop: "1280px",
},
backgroundImage: {
"gradient-radial": "radial-gradient(var(--tw-gradient-stops))",
"gradient-conic": "conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))",
"checkerboard": "repeating-linear-gradient(45deg, #71717a, #71717a 25%, #52525b 25%, #52525b 50%)", // zinc-500 - zinc-600
"checkerboard-dark": "repeating-linear-gradient(45deg, #71717a, #71717a 25%, #a1a1aa 25%, #a1a1aa 50%)", // zinc-500 - zinc-400
},
backgroundSize: {
checkerboard: "128px 128px",
},
},
},
plugins: [
require("@tailwindcss/typography"),
function ({ addUtilities }) {
const newUtilities = {
".transition-smooth": {
transitionDuration: "250ms",
transitionTimingFunction: "cubic-bezier(0.4, 0, 0.2, 1)",
},
};
addUtilities(newUtilities);
},
],
};