https://github.com/windicss/vue-windicss-preprocess
A Vue Loader to compile tailwindcss at build time.
https://github.com/windicss/vue-windicss-preprocess
Last synced: about 1 year ago
JSON representation
A Vue Loader to compile tailwindcss at build time.
- Host: GitHub
- URL: https://github.com/windicss/vue-windicss-preprocess
- Owner: windicss
- License: mit
- Archived: true
- Created: 2021-01-03T14:31:10.000Z (over 5 years ago)
- Default Branch: main
- Last Pushed: 2021-03-18T12:27:26.000Z (over 5 years ago)
- Last Synced: 2024-10-30T03:25:31.258Z (over 1 year ago)
- Language: TypeScript
- Size: 950 KB
- Stars: 45
- Watchers: 6
- Forks: 3
- Open Issues: 8
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# vue-windicss-preprocess
> A vue loader to compile [tailwindcss](https://github.com/tailwindlabs/tailwindcss) at build time based on [windicss](https://github.com/windicss/windicss) compiler.
```diff
+ 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)
```
## Installation
```sh
npm install vue-windicss-preprocess --save-dev
```
## Configuration
### Vue
Add `vue-windicss-preprocess` to your `webpack.config.js` or `vue.config.js`.
```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
}
```
```js
// 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
}
}]
})
}
}
```
### Nuxt
Add `vue-windicss-preprocess` to your `nuxt.config.js`
```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
}
})
}
}
}
```
## Basic Usage
You can write any [tailwindcss](https://github.com/tailwindlabs/tailwindcss) classes in your `.vue` files.
```html
Erin Lindford
Product Engineer
Message
export default {}
```
### Compilation mode
This is not css-in-js, [windicss](https://github.com/windicss/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.
```html
Erin Lindford
Product Engineer
Message
```
```css
/* ... */
.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
Interpretation mode will not modify your classes, it will only compile the original tailwind classes just like [tailwindcss](https://github.com/tailwindlabs/tailwindcss), but it is minimized and has native cross-browser support.
```css
/* ... */
.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;
}
/* ... */
}
```
## Using tailwind directives
```css
.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;
}
}
```
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.
## Features
- `tw` is an optional replacement attribute of `class`, The className in `tw` will be merged into the `class` attribute 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](https://github.com/windicss/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 the `class` attribute. (Attributes like `sm:hover` are not available because they may be rarely used and slow down the parsing speed.)
- [Customize](https://github.com/windicss/svelte-windicss-preprocess/blob/main/docs/using-tailwind-configuration.md): support `tailwind.config.js`.
- For more details, please refer to [windicss](https://github.com/windicss/windicss).
## Resources
- [Roadmap](https://github.com/windicss/windicss/projects/1)
- [Documents](https://windicss.org)
- [Discussions](https://github.com/windicss/windicss/discussions)
- [MIT License](https://github.com/windicss/vue-windicss-preprocess/blob/main/LICENSE)