vbv/client/tailwind.config.js

75 lines
2.0 KiB
JavaScript

const colors = require("./src/colors.json");
module.exports = {
content: [
"./index.html",
"./src/**/*.{vue,js,ts,jsx,tsx}",
// TODO: wenn man den server-pfad auch angibt wird Tailwind langsamer?! (Startzeit erhöht sich stark...)
// '../server/vbv_lernwelt/**/*.{html,js,py}',
],
theme: {
fontFamily: {
sans: [
"Buenos Aires, sans-serif",
{ fontFeatureSettings: '"salt"', fontVariationSettings: '"normal"' },
],
},
backgroundSize: {
auto: "auto",
cover: "cover",
contain: "contain",
60: "3.75rem",
},
extend: {
spacing: {
128: "32rem",
},
maxWidth: {
"8xl": "88rem",
"9xl": "96rem",
},
borderColor: (theme) => ({
DEFAULT: theme("colors.gray.500"),
}),
gridTemplateAreas: {
"horizontal-bar-chart": [
"y-axis . left-chart . right-chart .",
"y-axis . left-label . right-label .",
],
"rating-scale": [
". bar bar bar bar bar bar .",
"fst fst snd snd trd trd fth fth",
],
"rating-scale-slim": ["bar bar bar", "fst mid fth"],
"icon-card": ["icon title", "icon value"],
"document-list-item": ["title icons", "subtitle icons"],
},
gridTemplateColumns: {
"horizontal-bar-chart": "50px 1fr 300px 4fr 300px 1fr",
"horizontal-bar-chart-slim": "50px 1fr 78px 4fr 78px 1fr",
"icon-card": "60px auto",
"document-list-item": "1fr 100px",
},
gridTemplateRows: {
"horizontal-bar-chart": "200px 40px",
},
},
colors: colors,
},
safelist: [
{
pattern:
/bg-(blue|sky|green|red|orange|yellow|stone|gray|slate)-(200|300|400|500|600|700|800|900)/,
},
"it-icon",
"bg-handlungsfelder-overview",
"bg-lernmedien-overview",
],
plugins: [
require("@tailwindcss/typography"),
require("@tailwindcss/forms"),
require("@headlessui/tailwindcss"),
require("@savvywombat/tailwindcss-grid-areas"),
],
};