Installation

This package contains the Codey CSS theme. It also helps to integrate usage of Tailwind with the Codey styles. To install the package, run the following command:

npm i @xerius/codey-style

Install the required peer dependency:

npm i -D postcss@^8.4.14

Usage without codey-components

In order to load the codey theme into your application add the following line to your main.ts file:

import "@xerius/codey-style/build/codey.min.css";

in case you are not using Tailwind CSS, you will also need to include the setup file. The order of the imports matter, so make sure to include the setup file first:

import "@xerius/codey-style/build/setup.min.css";
import "@xerius/codey-style/build/codey.min.css";

Installing Tailwind CSS v3

For the installation of Tailwind CSS v3, please take a look at their installation docs. We do recommend to use the useTailwindConfig helper from the @xerius/codey-style package.

After you have installed the @xerius/codey-style package and Tailwind you will have the tailwind.config.js file, navigate to it to configure Tailwind.

Import the useTailwindConfig helper function. This function will return a basic Tailwind config provided by the Codey team.

// tailwind.config.js
import { useTailwindConfig } from "@xerius/codey-style";

module.exports = useTailwindConfig();

In our case we also need to customise the Post CSS config a bit. For this you can use the usePostCssConfig helper function from the @xerius/codey-style package. And use it to set the Post CSS config.

// postcss.config.js
const { usePostCssConfig } = require("@xerius/codey-style");

module.exports = usePostCssConfig();

For more information about the useTailwindConfig helper click here. For more information about the usePostCssConfig helper click here.

Usage without a framework

The Codey Style CSS library can also be used directly from the CDN. Following URL can be used:

https://cdn.xerius.be/style/x.x.x/codey.min.css

If you are not planning to use Tailwind CSS, include this one as well:

https://cdn.xerius.be/style/x.x.x/setup.min.css

Configuration for Nuxt

No longer maintained

As we are dropping support for Nuxt from codey packages, this setup is no longer tested or maintained.

Now the built CSS files can be included in your nuxt.config.js.

export default {
  ...
  css: [
    '@xerius/codey-style/build/setup.min.css',
    '@xerius/codey-style/build/codey.min.css'
  ],
  ...
}

It's also important to add the xer-codey class to your HTML tag. This makes sure that all styling can be correctly set. This configuration can also be set in your nuxt.config.js.

export default {
  ...
  head: {
    ...
    htmlAttrs: {
      class: 'xer-codey'
    }
  },
  ...
}