Tailwind CSS Integration #

Liquid bundles a Tailwind CSS preset which you can use as a base for your own Tailwind CSS configuration:

// tailwind.config.js
const liquidPreset = require('@emdgroup-liquid/liquid/dist/css/tailwind-preset.cjs')

module.exports = {
  presets: [liquidPreset],
}

Previewing the Tailwind config #

After you have configured Tailwind with Liquid's preset, you may want to use the awesome Tailwind Config Viewer as a dev dependency in your project in order to learn which Tailwind utility classes are available to you.

Disabling Tailwind’s default configuration #

Liquid's Tailwind preset extends Tailwind's default configuration by default. If you want Liquid's preset to not extend Tailwind's default configuration, include an empty presets key in the preset:

// tailwind.config.js
const liquidPreset = require('@emdgroup-liquid/liquid/dist/css/tailwind-preset.cjs')
liquidPreset.presets = []

module.exports = {
  presets: [liquidPreset],
}