# 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';

Vue.use(
  Chusho,
  // We provide a simple utility method to merge your own config with the preset defaults
  utils.mergeDeep(
    // Call the preset with the Tailwind config as parameter
    chushoPresetTailwind(tailwindConfig),
    {
      // 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
        /^(\w+:)?w-/,
        // Keep all top/left padding and negative margin for gaps
        /^(p|-m)[lt]-/,
      ],
    },
  },
};

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
  /^(\w+:)?w-(1\/3|2\/3)$/,
  // Keep only 2, 4 and 6 gaps
  /^(p|-m)[lt]-(2|4|6)$/,
],

# TypeScript

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


 






 


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

Vue.use(
  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';