We just released Vuestic Admin 3.0 🤗
🔥🔥🔥 Hire us

Tailwind CSS Support
#

We recommend our users to use Tailwind CSS as the most convenient and modern solution to the CSS helpers issue.

Preparations
#

Before we start with integration - please ensure you have both Tailwind CSS and Vuestic UI installed. If that's not the case - here are installation guide for Vuestic UI and for Tailwind CSS.

Syncing configs
#

To create a tight bind between Vuestic with Tailwind we have a @vuestic/tailwind package: it syncs breakpoint and color settings. You can sync from Vuestic UI to Tailwind or backwards!

Here's what you have to do to make it work:

1. Install this package:

npm install @vuestic/tailwind

2. After installation, three commands become available to you:

npx sync-tailwind-with-vuestic - formats and transfers the color and breakpoints settings from the tailwind.config.* file (and in its absence, it uses the default Tailwind CSS configuration) to the root file vuestic.config.js (also added by this command);

npx watch-tailwind - watches tailwind.config.* in background and synchronizes the Vuestic UI configuration on the fly;

npx sync-vuestic-with-tailwind - transfers color and breakpoint settings from default Vuestic UI config to the Tailwind's configuration file (tailwind.config.cjs).

3A. [Tailwind CSS -> Vuestic UI] import the config configuration in your main.* and specify it when initializing the application:

// main.*

import { createVuestic } from 'vuestic-ui'
import config from '../vuestic.config.js'

createApp(App)
  .use(createVuestic({ config }))
  .mount('#app')

Also, you may want to synchronize the configuration partially (in the example - only Tailwind CSS colors will be taken):

// main.*

import { createVuestic } from 'vuestic-ui'
import config from '../vuestic.config.js'

createApp(App)
  .use(createVuestic({
    config: {
      icons: [...],
      components: {
        all: { ... },
        presets: { ... },
      },
      colors: config.colors,
    },
  }))
  .mount('#app')

3B. [Vuestic UI -> Tailwind CSS] Nothing more is needed.

4A. [Tailwind CSS -> Vuestic UI] As a result you will be able to use Tailwind colors and breakpoints setting in Vuestic. For example, the result of synchronization default Tailwind settings will be a Vuestic settings file:

// vuestic.config.js

{
  breakpoint: {
    thresholds: {
      sm: 640,
        md: 768,
        lg: 1024,
        xl: 1280,
        '2xl': 1536,
    },
  },
  colors: {
    variables: {
      black: '#000',
        white: '#fff',
        'gray-50': '#f9fafb',
        'gray-100': '#f3f4f6',
        'gray-200': '#e5e7eb',
    ...
      'rose-700': '#be123c',
        'rose-800': '#9f1239',
        'rose-900': '#881337',
    },
  },
}

4B. [Vuestic UI -> Tailwind CSS] Vuestic UI setting will be available in the Tailwind CSS scope. Output format follows the requirements, located here and here.