82 lines
2.5 KiB
TypeScript
82 lines
2.5 KiB
TypeScript
import { type Config } from "tailwindcss";
|
|
import { fontFamily } from "tailwindcss/defaultTheme";
|
|
import plugin from "tailwindcss/plugin";
|
|
|
|
interface RecursiveKeyValuePair<K extends keyof any = string, V = string> {
|
|
[key: string]: V | RecursiveKeyValuePair<K, V>;
|
|
}
|
|
type CSSRuleObject = RecursiveKeyValuePair<string, null | string | string[]>;
|
|
|
|
export default {
|
|
content: ["./src/**/*.{js,ts,jsx,tsx}"],
|
|
theme: {
|
|
extend: {
|
|
container: {
|
|
center: true,
|
|
padding: "1.5rem",
|
|
},
|
|
fontSize: {
|
|
xs: ["0.875rem", { lineHeight: "1rem" }], // 14px 0.875rem
|
|
sm: ["1rem", { lineHeight: "1.25rem" }], // 16px 1rem
|
|
base: ["1.25rem", { lineHeight: "1.5rem" }], // 20px 1.25rem
|
|
lg: ["1.5rem", { lineHeight: "1.75rem" }], // 24px 1.5rem
|
|
xl: ["2rem", { lineHeight: "1.75rem" }], // 32px 2rem
|
|
"2xl": ["2.5rem", { lineHeight: "2rem" }], // 40px 2.5rem
|
|
"3xl": ["3rem", { lineHeight: "2.25rem" }], // 48px 3rem
|
|
},
|
|
fontFamily: {
|
|
sans: ["var(--font-jakarta)"],
|
|
roadster: ["var(--font-roadster)", ...fontFamily.sans],
|
|
},
|
|
colors: {
|
|
blue: "#264653",
|
|
green: "#2A9D8F",
|
|
yellow: "#E9C46A",
|
|
sunrise: "#EDAD63",
|
|
orange: "#F4A261",
|
|
red: "#E76F51",
|
|
white: "#EAD9C2",
|
|
sand: "#F0D4B2",
|
|
black: "#2E251E",
|
|
},
|
|
},
|
|
},
|
|
plugins: [
|
|
// Responsive Typography
|
|
plugin(function ({ addUtilities, theme }) {
|
|
const fontSizes = Object.keys(theme("fontSize"));
|
|
|
|
const buildCSS = (fontSize: string): CSSRuleObject => {
|
|
const fsIndex = fontSizes.indexOf(fontSize);
|
|
|
|
if (fsIndex > 1) {
|
|
const desktop = fontSize;
|
|
const tablet = fontSizes[fsIndex - 1] ?? fontSize;
|
|
const mobile = fontSizes[fsIndex - 2] ?? fontSize;
|
|
|
|
return {
|
|
"font-size": theme(`fontSize.${mobile}`),
|
|
"@screen md": {
|
|
"font-size": theme(`fontSize.${tablet}`),
|
|
},
|
|
"@screen 2xl": {
|
|
"font-size": theme(`fontSize.${desktop}`),
|
|
},
|
|
};
|
|
}
|
|
|
|
return { "font-size": theme(`fontSize.${fontSize}`) };
|
|
};
|
|
|
|
addUtilities({
|
|
".text-r-3xl": buildCSS("3xl"),
|
|
".text-r-2xl": buildCSS("2xl"),
|
|
".text-r-xl": buildCSS("xl"),
|
|
".text-r-lg": buildCSS("lg"),
|
|
".text-r-base": buildCSS("base"),
|
|
".text-r-sm": buildCSS("sm"),
|
|
});
|
|
}),
|
|
],
|
|
} satisfies Config;
|