unocss preset work with preset-wind
npm install preset-wind-plus
We like the tailwindcss syntax, but it's often too long to read. Today, with unocss and this preset, you can reduce tailwind syntax by 30% and improve code readability.
You need Preset-wind4 and this preset to work
!Reduce 30% tailwind syntax
shell
bun i -D preset-wind-plus unocss @unocss/preset-wind4
`ts
// uno.config.ts
import { defineConfig} from "unocss";
import {presetWindPlus} from 'preset-wind-plus'
import presetWind4 from "@unocss/preset-wind4";
export default defineConfig({
presets: [
// ...
presetWind4(),
presetWindPlus({
maxScreenW:1150,
minScreenW:320,
}),
],
})
`
ts
// astro.config.ts
import { defineConfig } from 'astro/config'
import UnoCSS from 'unocss/astro'export default defineConfig({
integrations: [
UnoCSS(),
],
})
`
| Unocss My preset | tailwind like or CSS |
|-------------------------------|------------------------------------------------|
| flex\|10\|50\|500 | grow-10 shrik-50 basis-500 |
| flex\|10\|50\|[500rem] | grow-10 shrik-50 basis-500rem |
| flex\|10\|50 | grow-10 shrik-50 |
| px-[6%]-[10rem] | pl-[6%] pr-[10rem] |
| px-6-10 | pl-6 pr-10 |
| mx-6-10 | ml-6 mr-10 |
| mx-6-6 | mx-6 |
| gap-6-11 | gap-y-6 gap-x-11 |
| gap-[6vw]-[11%] | gap-y-[6vw] gap-x-[11%] |
| inset-x-6-9 | inset-inline: 6px 9px |
| inset-x-[6%]-[9vw] | inset-inline: 6% 9vw |
| inset-y-6-9 | inset-block: 1.5rem 2.25rem |
| m-5-6-9-10 | |
| inset-6-9-10 | inset : 6 9 10; |
| p-6-4-8-201 | pt-6 pr-4 pb-8 pl-201 or py-6-8 px-4-201 |
| p-[6%]-[4rem]-[8vw]-[201%] | pt-6% pr-4rem pb-8vw pl-201% |
| p-6-4 | py-6 px-4 |
| p-6-4-8 | |
| p-6-4-auto-auto | |
| flex-col-4 | justify-items-start items-center flex flex-col |
| size-60 | w-60 h-60 |
| size-min-fit | w-min h-fit |
| size-60-80 | w-60 h-80 |
| mx-trim \| my-trim \| mt-trim | margin-trim |
| grid-area-one | grid-area: one; |
| grid-area-helloWorld | grid-area: helloWorld; |
| my-trim | margin-trim: block |
| mt-trim | margin-trim: block-start; |
#### All css sizes supported if they are iside [brackets]
em|rem|%|vw|vh|svh|lvh|svw|lvw|dvw|svi|lvi|dvb => [21svh] [5/7] [1px]text-[red,hover:orange]
bg-[red,lg:[hover:green-100,green-600],md:pink]
grid-[col-start-1,col-span-2,lg:[col-start-1,col-span-3,row-span-12]]
Compress the length of tailwindcss Class
$3
list|col|row|grid|fill|font|text|bg|border|stroke|outline|underline|ring|divide
It reqiuere the presetWind()` Preset-windto work because it convert to tailwindcss class
Preset-wind presset| unocss | Tailwind convertion |
|-------------------------------------------------------------|---------------------------------------------------------------------------------------------|
| text-[red,hover:orange,md:hover:[ green,blue,first:green ]] | text-red hover:text-orange md:hover:text-green md:hover:text-blue md:hover:first:text-green |
Flexbox shortcut
!flexbox
!Flexbox
Decompose the layout of the divs in a grid from 1 to 9.`md
flex-row-1 flex-row-2 flex-row-3 flex-row-4 flex-row-5 flex-row-6 flex-row-7 flex-row-8 flex-row-9
flex-col-1 flex-col-2 flex-col-3 flex-col-4 flex-col-5 flex-col-6 flex-col-7 flex-col-8 flex-col-9
`
$3
md
flex-col-4 = justify-items-start items-center flex flex-col
`
html
`https://github.com/jojojojojoj5564656465465/unocss-preset-starter/assets/45184918/d43fa35e-5c34-400c-bc0c-110752c96d05
css
.flex-row-2 {
display: flex;
flex-direction: row;
justify-content: center;
align-items: start;
}
.flex-col-4 {
display: flex;
flex-direction: column;
justify-content: start;
align-items: center;
}
.flex-col-7 {
display: flex;
flex-direction: column;
justify-content: start;
align-items: end;
}
`
copy and Past
$3
Unocss extension
html
01
02
03
09
03
03
`
fluide size
Fluid Value Shortcuts for UnoCSS
All fluid value shortcuts must follow these rules:
1. They must start with
to indicate a fluid value.
2. The minimum and maximum values should be separated by /.Available Shortcuts
| Shortcut | Description |
|----------|-------------|
|
~m-min/max | Fluid margin |
| ~mx-min/max | Fluid horizontal margin (left and right) |
| ~my-min/max | Fluid vertical margin (top and bottom) |
| ~mt-min/max | Fluid top margin |
| ~mr-min/max | Fluid right margin |
| ~mb-min/max | Fluid bottom margin |
| ~ml-min/max | Fluid left margin |
| ~p-min/max | Fluid padding |
| ~px-min/max | Fluid horizontal padding (left and right) |
| ~py-min/max | Fluid vertical padding (top and bottom) |
| ~pt-min/max | Fluid top padding |
| ~pr-min/max | Fluid right padding |
| ~pb-min/max | Fluid bottom padding |
| ~pl-min/max | Fluid left padding |
| ~text-min/max | Fluid font size |
| ~gap-min/max | Fluid gap (for grid and flexbox layouts) |
| ~w-min/max | Fluid width |
| ~h-min/max | Fluid height |
| ~border-min/max | Fluid border width |
| ~outline-min/max | Fluid outline width |Examples
-
~m-8/16: Creates a fluid margin that scales from 8px to 16px
- ~text-14/20: Creates a fluid font size that scales from 14px to 20px
- ~w-100/200: Creates a fluid width that scales from 100px to 200pxNote: The
min and max values in these shortcuts represent pixels. The function will convert these to rem units and create a clamp()` function that smoothly transitions between these values based on the viewport width.This syntax allows for quick and easy creation of fluid, responsive designs without the need for multiple breakpoints or complex media queries.
MIT License © 2023