Tailwind CSS Support #
We recommend our users to use Tailwind CSS as the most convenient and modern solution to the CSS helpers issue.
CSS helpers and the CSS reset file will remain in the Vuestic UI bundle until version 1.7.0, after which they will be permanently removed.
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/tailwind2. 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).
We're not overriding Tailwind CSS settings, but extending them.
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',
},
},
}