@acdh-oeaw/tailwindcss-preset
v0.0.22
Published
this is a customisable preset for [`tailwindcss`](https://tailwindcss.com/). it includes animation utilities from [`tailwindcss-animate`](https://github.com/jamiebuilds/tailwindcss-animate) and typography styles from [`@tailwindcss/typography`](https://ta
Downloads
112
Readme
acdh-oeaw tailwindcss preset
this is a customisable preset for tailwindcss. it includes animation
utilities from tailwindcss-animate and
typography styles from @tailwindcss/typography.
how to install
npm install tailwindcss @acdh-oeaw/tailwindcss-presethow to setup
// tailwind.config.ts
import { type Config } from "tailwindcss";
import { preset } from "@acdh-oeaw/tailwindcss-preset";
const config = {
content: ["./src/**/*.@(ts|tsx)"],
presets: [preset],
} satisfies Config;
export default config;how to toggle dark mode
dark mode can be toggled via data attribute on the root element:
<html data-color-scheme="dark">
<!-- ... -->
</html>how to customise
design tokens can be customised via css custom properties. note that colors must be defined as hsl channels.
:root {
--color-foreground: 240deg 6% 10%;
}
:root[data-color-scheme="dark"] {
--color-foreground: 240deg 6% 90%;
}