Tailwind configuration ​

Prerequisites ​

To use this component you need to install this dependency:

npm install tailwindcss@3 -D

Add tailwind config file ​

On your root project add a tailwind.config.js file and extends our tailwind config:

const { tailwindConfigBase } = require('@zadigetvoltaire/ui/tailwindcss/tailwind.config')

/** @type {import('tailwindcss').Config} */
module.exports = {
  presets: [tailwindConfigBase],
  content: ['path/to_your/components_and_views'],
}

Add tailwind CSS file ​

To be able to use our own tailwind utility classes, you must import the tailwind.css file of this library:

Vue ​

main.{js, ts}

import '@zadigetvoltaire/ui/tailwindcss/tailwind.css'

You can also import this file in

Nuxt ​

nuxt.config.{js, ts}

export default defineNuxtConfig({
  css: [
    '@zadigetvoltaire/ui/tailwindcss/tailwind.css',
    ...
  ],
})

Postcss recommended config ​

Install dependency ​

npm install autoprefixer

Config ​

postcss.config.js

module.exports = {
  plugins: {
    autoprefixer: {},
    tailwindcss: {},
  },
}