0.0.22 • Published 1 year ago
@acdh-oeaw/tailwindcss-preset v0.0.22
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-preset
how 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%;
}
0.0.22
1 year ago
0.0.21
1 year ago
0.0.20
1 year ago
0.0.18
1 year ago
0.0.19
1 year ago
0.0.17
2 years ago
0.0.16
2 years ago
0.0.15
2 years ago
0.0.14
2 years ago
0.0.13
2 years ago
0.0.12
2 years ago
0.0.11
2 years ago
0.0.10
2 years ago
0.0.9
2 years ago
0.0.8
2 years ago
0.0.7
2 years ago
0.0.6
2 years ago
0.0.5
2 years ago
0.0.4
2 years ago
0.0.3
2 years ago
0.0.2
2 years ago
0.0.1
2 years ago