Install the package and its peer deps
pnpm i -D @norce/tailwind-preset tailwind-easy-theme colord
Add it to your tailwind config
/** @type {import('tailwindcss').Config} */
module.exports = {
content: ['./src/**/*.{svelte,html,js,ts,jsx,tsx}'],
presets: [require('@norce/tailwind-preset')],
plugins: [],
};
Make sure you got the vscode extension bradlc.vscode-tailwindcss
installed.
As it is practically an essential when working with tailwind. Giving you autocomplete
for the classes and the ability to hover to see the generated css.
Theme is set with prefers media query automatically to light
or dark
,
but you can set the theme by adding data-theme='dark'
to an element.
This means you can override the users preferred theme, but you can also use it
to force a particular section to have a theme. For instance the sidebar.
Allowed values are light
, dark
.