Installation

Install the package and its peer deps

pnpm i -D @norce/tailwind-preset tailwind-easy-theme colord

How to use

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: [],
};

VSCode extension

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.

How to set theme

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.