server/assets/tailwind.config.cjs

129 lines
4.1 KiB
JavaScript

// See the Tailwind configuration guide for advanced usage
// https://tailwindcss.com/docs/configuration
const plugin = require("tailwindcss/plugin")
const defaultTheme = require("tailwindcss/defaultTheme")
const fs = require("fs")
const path = require("path")
module.exports = {
content: [
"./js/**/*.{js,jsx,ts,tsx}",
"../lib/boardwise_web.ex",
"../lib/boardwise_web/**/*.*ex",
],
theme: {
fontSize: {
xs: ["0.75rem", { lineHeight: "1rem" }],
sm: ["0.875rem", { lineHeight: "1.5rem" }],
base: ["1rem", { lineHeight: "1.75rem" }],
lg: ["1.125rem", { lineHeight: "1.75rem" }],
xl: ["1.25rem", { lineHeight: "2rem" }],
"2xl": ["1.5rem", { lineHeight: "2.25rem" }],
"3xl": ["1.75rem", { lineHeight: "2.25rem" }],
"4xl": ["2rem", { lineHeight: "2.5rem" }],
"5xl": ["2.5rem", { lineHeight: "3rem" }],
"6xl": ["3rem", { lineHeight: "3.5rem" }],
"7xl": ["4rem", { lineHeight: "4.5rem" }],
},
extend: {
backgroundImage: {
"radial-gradient/black":
"radial-gradient(circle at center, black 0%, transparent 50%)",
},
borderRadius: {
"4xl": "2.5rem",
},
boxShadow: {
sm: "0 2px 4px 0 rgb(60 72 88 / 0.15)",
DEFAULT: "0 0 3px rgb(60 72 88 / 0.15)",
md: "0 5px 13px rgb(60 72 88 / 0.20)",
lg: "0 10px 25px -3px rgb(60 72 88 / 0.15)",
xl: "0 20px 25px -5px rgb(60 72 88 / 0.1), 0 8px 10px -6px rgb(60 72 88 / 0.1)",
"2xl": "0 25px 50px -12px rgb(60 72 88 / 0.25)",
inner: "inset 0 2px 4px 0 rgb(60 72 88 / 0.05)",
testi: "2px 2px 2px -1px rgb(60 72 88 / 0.15)",
},
fontFamily: {
display: [
["Mona Sans", ...defaultTheme.fontFamily.sans],
{ fontVariationSettings: '"wdth" 125' },
],
sans: ["Mona Sans", ...defaultTheme.fontFamily.sans],
},
},
},
plugins: [
require("autoprefixer"),
require("tailwindcss"),
require("@tailwindcss/forms"),
// Allows prefixing tailwind classes with LiveView classes to add rules
// only when LiveView classes are applied, for example:
//
// <div class="phx-click-loading:animate-ping">
//
plugin(({ addVariant }) =>
addVariant("phx-no-feedback", [".phx-no-feedback&", ".phx-no-feedback &"])
),
plugin(({ addVariant }) =>
addVariant("phx-click-loading", [
".phx-click-loading&",
".phx-click-loading &",
])
),
plugin(({ addVariant }) =>
addVariant("phx-submit-loading", [
".phx-submit-loading&",
".phx-submit-loading &",
])
),
plugin(({ addVariant }) =>
addVariant("phx-change-loading", [
".phx-change-loading&",
".phx-change-loading &",
])
),
// Embeds Heroicons (https://heroicons.com) into your app.css bundle
// See your `CoreComponents.icon/1` for more information.
//
plugin(function ({ matchComponents, theme }) {
let iconsDir = path.join(__dirname, "./vendor/heroicons/optimized")
let values = {}
let icons = [
["", "/24/outline"],
["-solid", "/24/solid"],
["-mini", "/20/solid"],
]
icons.forEach(([suffix, dir]) => {
fs.readdirSync(path.join(iconsDir, dir)).forEach((file) => {
let name = path.basename(file, ".svg") + suffix
values[name] = { name, fullPath: path.join(iconsDir, dir, file) }
})
})
matchComponents(
{
hero: ({ name, fullPath }) => {
let content = fs
.readFileSync(fullPath)
.toString()
.replace(/\r?\n|\r/g, "")
return {
[`--hero-${name}`]: `url('data:image/svg+xml;utf8,${content}')`,
"-webkit-mask": `var(--hero-${name})`,
mask: `var(--hero-${name})`,
"mask-repeat": "no-repeat",
"background-color": "currentColor",
"vertical-align": "middle",
display: "inline-block",
width: theme("spacing.5"),
height: theme("spacing.5"),
}
},
},
{ values }
)
}),
],
}