useTailwindConfig

After upgrading to Tailwind v3 we saw the need and created a helper for setting up Tailwind in your projects. This allows you to install Tailwind CSS inside the project and use the helper function to configurate it correctly.

For the installation of Tailwind v3, please take a look at their installation docs.

Usage

After Tailwind has been installed correctly to your application, all you need to do is configurate it correctly to work with the Codey theme and style.

For this you will have to install the @xerius/codey-style package. Then navigate to the tailwind.config.js file 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();

Options

The useTailwindConfig helper function accepts a param, which are options to extend the basic Tailwind config provided by the Codey team. This can be used in certain cases, when there is a need to add or override a config value. The extended options have TypeScript support to help you out.

import { useTailwindConfig } from "@xerius/codey-style";

module.exports = useTailwindConfig({
  // your extended Tailwind CSS options
});