A vue loader to compile tailwindcss at build time based on windicss compiler.
+ This package will be archived, we will give up support for it, please switch your project to [windicss-webpack-plugin](https://github.com/windicss/windicss-webpack-plugin)npm install vue-windicss-preprocess --save-devAdd vue-windicss-preprocess to your webpack.config.js or vue.config.js.
// webpack.config.js
module.exports = {
module: {
rules: [
// ... other rules omitted
{
test: /\.vue$/,
use: [{
loader: 'vue-windicss-preprocess',
options: {
config: "tailwind.config.js", // tailwind config file path OR config object (optional)
compile: false, // false: interpretation mode; true: compilation mode
globalPreflight: true, // set preflight style is global or scoped
globalUtility: true, // set utility style is global or scoped
prefix: 'windi-' // set compilation mode style prefix
}
}]
}
]
},
// plugin omitted
}// vue.config.js
module.exports = {
configureWebpack: (config) => {
config.module.rules.push({
test: /\.vue$/,
use: [{
loader: 'vue-windicss-preprocess',
options: {
config: "tailwind.config.js", // tailwind config file path OR config object (optional)
compile: false, // false: interpretation mode; true: compilation mode
globalPreflight: true, // set preflight style is global or scoped
globalUtility: true, // set utility style is global or scoped
prefix: 'windi-' // set compilation mode style prefix
}
}]
})
}
}Add vue-windicss-preprocess to your nuxt.config.js
// nuxt.config.js
export default {
// ... other configurations omitted
// Build Configuration (https://go.nuxtjs.dev/config-build)
build: {
extend(config) {
config.module.rules.push({
test: /\.vue$/,
loader: 'vue-windicss-preprocess',
options: {
config: "tailwind.config.js", // tailwind config file path OR config object (optional)
compile: false, // false: interpretation mode; true: compilation mode
globalPreflight: true, // set preflight style is global or scoped
globalUtility: true, // set utility style is global or scoped
prefix: 'windi-' // set compilation mode style prefix
}
})
}
}
}You can write any tailwindcss classes in your .vue files.
<template>
<div class="py-8 px-8 max-w-sm mx-auto bg-white rounded-xl shadow-md space-y-2 sm:py-4 sm:flex sm:items-center sm:space-y-0 sm:space-x-6">
<img class="block mx-auto h-24 rounded-full sm:mx-0 sm:flex-shrink-0" src="/img/erin-lindford.jpg" alt="Woman's Face">
<div class="text-center space-y-2 sm:text-left">
<div class="space-y-0.5">
<p class="text-lg text-black font-semibold">
Erin Lindford
</p>
<p class="text-gray-500 font-medium">
Product Engineer
</p>
</div>
<button class="px-4 py-1 text-sm text-purple-600 font-semibold rounded-full border border-purple-200 hover:text-white hover:bg-purple-600 hover:border-transparent focus:outline-none focus:ring-2 focus:ring-purple-600 focus:ring-offset-2">Message</button>
</div>
</div>
</template>
<script>
export default {}
</script>This is not css-in-js, windicss only merges and compiles the tailwind classes of each line into a new class. You can try to compile (npm run build) and check the generated css file.
<div class="windi-15wa4me">
<img class="windi-1q7lotv" src="/img/erin-lindford.jpg" alt="Woman's Face">
<div class="windi-7831z4">
<div class="windi-x3f008">
<p class="windi-2lluw6"> Erin Lindford </p>
<p class="windi-1caa1b7"> Product Engineer </p>
</div>
<button class="windi-d2pog2">Message</button>
</div>
</div>/* ... */
.windi-1q7lotv {
border-radius: 9999px;
display: block;
height: 6rem;
margin-left: auto;
margin-right: auto;
}
/* ... */
@media (min-width: 640px) {
/* ... */
.windi-1q7lotv {
flex-shrink: 0;
margin-left: 0;
margin-right: 0;
}
/* ... */Interpretation mode will not modify your classes, it will only compile the original tailwind classes just like tailwindcss, but it is minimized and has native cross-browser support.
/* ... */
.py-8 {
padding-top: 2rem;
padding-bottom: 2rem;
}
/* ... */
@media (min-width: 640px) {
/* ... */
.sm\:items-center {
align-items: center;
}
.sm\:mx-0 {
margin-left: 0;
margin-right: 0;
}
.sm\:py-4 {
padding-top: 1rem;
padding-bottom: 1rem;
}
/* ... */
}<style global>
.testApply {
@apply pt-6 text-base leading-6 font-bold sm:text-lg sm:leading-7;
}
@screen sm {
ul {
@apply bg-gray-100 p-2 rounded-lg;
}
}
</style>If you are using Vetur vscode extension, I believe most people are using it. You will need to add "vetur.validation.style": false to your configuration file.
Hit ctrl-shift-p or cmd-shift-p on mac, type open settings, and select Preferences: Open Settings (JSON). Add "vetur.validation.style": false to settings.json then save it.
-
twis an optional replacement attribute ofclass, The className intwwill be merged into theclassattribute after compilation. -
Group: You can also write groups in all the attributes mentioned above, such as
class="font-meidum sm:hover:(font-bold bg-gray-200)". This is a native feature supported by windicss. -
Unrestricted build: such as
bg-hex-1c1c1e p-3.2 p-3rem p-4px w-10/11 bg-$custom-variable ... -
[Using tailwind directives], such as
@apply,@screen,@variants. -
States attribute: such as
sm md lg xl xxl focus hover dark ...after applid media rules then also will be merged into theclassattribute. (Attributes likesm:hoverare not available because they may be rarely used and slow down the parsing speed.) -
Customize: support
tailwind.config.js. -
For more details, please refer to windicss.