Installation

This package provides the tailwind preset and theme css variables that are required to utilize the codey-components.

npm i @xerius/codey-tailwind autoprefixer@^10 postcss@^8 tailwindcss@^3

Setup tailwindcss config

The tailwind.config.ts should look as follows:

import type { Config } from "tailwindcss";
import { preset, content } from "@xerius/codey-tailwind";

export default {
  content,
  presets: [preset],
  plugins: [],
} satisfies Config;

INFO

Tailwind Presets come with a specific override and merge order. If you customize the config, make sure you check the Tailwind Presets documentation to ensure that the preset config is still applied.

Add postcss config

For tailwind to function correctly with the vite-vue-plugin a postcss config is required to define the plugins that should be used. Create a postcss.config.js file in the root of your project with the following content:

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
};

Setup styles.css

In the root of your project src add a styles.css file with the following content:

@layer tailwind-base, primevue, tailwind-utilities;

@import "@xerius/codey-tailwind/theme/xerius.css";

@layer tailwind-base {
  @tailwind base;
}

@layer tailwind-utilities {
  @tailwind components;
  @tailwind utilities;
  @tailwind variants;
}

This places the required tailwind layers in the correct order to ensure they work correctly with PrimeVue. Here we also import the theme variables.

Runtime theme switching

As themes are set using css variables provided by the @xerius/codey-tailwind/theme section. They can be changed at runtime by loading another theme preset.

TODO

Add a guide on how to switch themes at runtime.