# Tailwind

A configuration preset to easily integrate with Tailwind CSS.

# Preconfigured components

# Flex

  • containerClass set to flex flex-wrap
  • defaultWidth set to w-full
  • gaps (both x and y) populated using the spacing settings
  • widths populated using the width settings

# Installation

Install with npm:

npm install @chusho/preset-tailwind

Or yarn:

yarn add @chusho/preset-tailwind

Now you can import the preset, extend it and pass its result as Chūshō’s config:

import Vue from 'vue';
import Chusho, { utils } from 'chusho';
import chushoPresetTailwind from '@chusho/preset-tailwind';
// Load your own Tailwind config, real path might be different
import tailwindConfig from '../tailwind.config.js';

  // We provide a simple utility method to merge your own config with the preset defaults
    // Call the preset with the Tailwind config as parameter
      // Here goes your own config

# PurgeCSS configuration

If your project uses PurgeCSS, you might need to update its configuration to ensure classes generated by components are kept in your final stylesheet.

// tailwind.config.js
module.exports = {
  purge: {
    options: {
      // Keep CFlex wrapper classes
      whitelist: ['flex', 'flex-wrap'],
      // Keep CFlexItem classes
      whitelistPatterns: [
        // Keep all widths (including responsive) for columns
        // Keep all top/left padding and negative margin for gaps

Although the above rules are convenient, they might unnecessarily increase the size of the final file. You should rather consider enabling specific widths and gaps based on what you use:

whitelistPatterns: [
  // Keep only 1/3 and 2/3 widths
  // Keep only 2, 4 and 6 gaps

# TypeScript

In a TypeScript environment, you can cast the config object to benefit from autocomplete:



// ...
import Chusho, { ChushoUserOptions, utils } from 'chusho';
// ...

  utils.mergeDeep(chushoPresetTailwind(tailwindConfig), {
    // Here goes your own config
  } as ChushoUserOptions)

Depending on your TypeScript config, you may encounter the following error:

Could not find a declaration file for module '../tailwind.config.js'. '../tailwind.config.js' implicitly has an 'any' type.ts(7016)

You can get rid of it by adding the following code in one of your definition files (.d.ts):

declare module '*/tailwind.config.js';