Installation

npm i unocss-preset-scalpel unocss --save-dev # with npm
yarn add unocss-preset-scalpel unocss -D # with yarn
pnpm add unocss-preset-scalpel unocss -D # with pnpm

Usage

import { defineConfig } from 'unocss'
import { presetScalpel } from 'unocss-preset-scalpel'

export default defineConfig({
  presets: [
    presetScalpel({
      // config
    }),
  ],
})

why Scalpel

Atomic css should scalpel-like precision

use any colors and any unit with number

why we need memorize rules? like tailwind css w-1{width: 0.25rem;}

why 1 mean 0.25 if need 0.25rem just write it ! like w-0.25rem

write atomic css like native css width-0.25rem

this preset usually write like native css, use - concat key value like display-flex

of course we has some shortcuts

shortcuts

native css is sooooo long this preset define some shortcuts

| shortcut | mean | desc | | :------: | :------------: | :---------------------------- | | m | margin | | | p | padding | | | w | width | | | h | height | | | t | top | | | r | right | | | b | bottom | | | l | left | | | x | left and right | | | y | top and bottom | | | m- | Minus sign | negative number in some value |

special unit

there are some special units

| unit | mean | desc | | :--: | :------: | :------------------------- | | p | % | percent eq % | | v | variable | usually used for px to rem |

important

use end with ! className toggle !important

pseudo

use pseudo before any className

like this

| pseudo | | | | | :-----------: | :-----------: | :---------------: | :---------: | | any-link | blank | checked | current | | default | defined | disabled | drop | | empty | enabled | first | first-child | | first-of-type | fullscreen | future | focus | | focus-visible | focus-within | host | hover | | indeterminate | in-range | invalid | active | | last-child | last-of-type | left | link | | local-link | only-child | only-of-type | optional | | out-of-range | past | placeholder-shown | read-only | | read-write | required | right | root | | target | target-within | user-invalid | valid | | visite | scope | | |

<div class="hover:color-transparent">hover me to transparent</div>

media query

use media query before any className and pseudo

the default media query has sm md lg xl like this

<div class="md@hover:color-transparent">hover me to transparent</div>
<div class="md@color-f00 xl@color-red color-blue"></div>

Configurations

config object like this

// this is preset default value
{
  /**
   * define color name
   */
  colors:{
    red: '#f00',
    white: '#fff',
    black: '#000',
    blue: '#00f',
    yellow: '#ff0',
    transparent: 'transparent',
    // diyColor:'#30336b'
  },
  /**
   * the default unit you can omitted
   * like width-1 mean this unit ⬇
   */
  unit:'px',
  /**
   * write you like mediaQuery
   */
  mediaQueries:{
    sm: 'media (min-width: 640px)',
    md: 'media (min-width: 768px)',
    lg: 'media (min-width: 1024px)',
    xl: 'media (min-width: 1280px)',
    // supportGrid: 'supports (display: grid)'
  },
  // set all css has important
  important:false,
  // ignore some rules like ['flexBasis']
  ignoreRules:[],
  // convert unit v
  vToAny: {
    unit: 'rem', // convert v to rem
    rootValue: 16, // value ÷ this
    unitPrecision: 5,
    minPixelValue: 1,
  },

}

How to use

• width and height

  support shortcut w h

  | Class | Properties | | :------------- | :-------------- | | w-0 | width:0; | | w-20 | width:20px; | | width-20 | width:20px; | | w-0.25vh | width:0.25vh | | width-333.333p | width:333.333% | | w-3.1415 | width:3.1415% | | width-100v | width:6.25rem | | h-0 | height:0; | | height-20 | height:20px; | | h-20 | height:20px; | | height-0.25vh | height:0.25vh | | h-333.333p | height:333.333% | | height-3.1415 | height:3.1415% | | h-100v | height:6.25rem |

• min max width and height

  add min- or max- before width or height
  support shortcut w h

  | Class | Properties | | :---------------- | :---------------- | | min-w-0.25vh | min-width:0.25vh | | min-width-0.25vh | min-width:0.25vh | | max-h-0.25vh | max-height:0.25vh | | max-height-0.25vh | max-height:0.25vh |

• square

  use square set same width and height

  | Class | Properties | | :------------ | :------------------------------ | | square-25 | width:25px;height:25px; | | square-0.25vh | width:0.25vh;height:0.25vh |

• margin and padding

  set margin and padding with direction
  this value has negative number
  support shortcut m p m- t r b l x y

  | Class | Properties | | :---------- | :------------------------------------------- | | m-25 | margin:25px; | | p-25 | padding:25px; | | m-m-25 | margin:-25px; | | p-x-999vh | padding-left:999vh;padding-right:999vh; | | m-l-0.25rem | margin-right:0.25rem; |

• border

  set border with direction
  use border or border-w or border-width

  | Class | Properties | | :--------------- | :------------------------------------------------- | | border-1 | border-width:1px | | border-x-3 | border-left-width:3px;border-right-width:3px; | | border-l-0 | border-left-width:0; | | border-r-1.25rem | border-right-width:1.25rem; | | border-w-2 | border-width:2px; | | border-width-0 | border-width:0; |

• border-style

  set border-style
  support shortcut border

  | Class | Properties | | :----------------- | :------------------- | | border-style-solid | border-style:solid; | | border-dotted | border-style:dotted; |

  enum values

  | Value | | | | :----: | :-----: | :----: | | none | hidden | dotted | | dashed | solid | double | | groove | ridge | inset | | outset | inherit | - |

• border-radius

  set border-radius any number and unit
  use br or border-radius
  support shortcut t l r b tl lt tr rt bl lb br rb

  | Class | Properties | | :---------------- | :--------------------------------------------------------------- | | br-8 | border-radius:8px; | | border-radius-15% | border-radius:15%; | | br-t-50% | border-top-left-radius:50%;border-top-right-radius:50%; | | br-l-20 | border-top-left-radius:20px;border-bottom-left-radius:20px; | | br-bl-3 | border-bottom-left-radius:3px; |

• circle

  set border-radius 50% is static preset

  | Class | Properties | | :----- | :----------------- | | circle | border-radius:50%; |

• box-sizing

  set box-sizing

  | Class | Properties | | :--------------------- | :---------------------- | | box-sizing-content-box | box-sizing:content-box; | | box-sizing-border-box | box-sizing:border-box; |

• color

  Amazing! we can use all color by hex and set opacity, and you can define color name!
  has special value transparent
  use 3-digit and 6-digit and 8-digit (rgba) hex just copy from design draft like figma!! just copy it !
  color has some shortcut

  | Shortcut | Desc | | :------: | :----------: | | c | color | | text | color | | bg | background | | border-c | border-color | | border | border-color |

  | Class | Properties | | :------------------ | :---------------------------------- | | c-red | color:rgba(255, 0, 0, 1); | | c-transparent | color:transparent; | | text-f00-25 | background:rgba(255, 0, 0, 0.25); | | color-#54a0ff | color:rgba(84, 160, 255, 1); | | bg-#fffc0140 | background:rgba(255, 252, 1, 0.25); | | background-10ac84 | background:rgba(16, 172, 132, 1); | | border-000 | background:rgba(0, 0, 0, 1); | | border-color-000-15 | background:rgba(0, 0, 0, 0.15); |

• cursor

  set cursor value
  rule is cursor-<value>

  | Class | Properties | | :------------- | :-------------- | | cursor-pointer | cursor:pointer; | | cursor-no-drop | cursor:no-drop; |

  enum values

  | Value | | | | :----------: | :---------: | :-----------: | | auto | default | none | | context-menu | help | pointer | | progress | wait | cell | | crosshair | text | vertical-text | | alias | copy | move | | no-drop | not-allowed | e-resize | | n-resize | ne-resize | nw-resize | | s-resize | se-resize | sw-resize | | w-resize | ew-resize | ns-resize | | nesw-resize | nwse-resize | col-resize | | row-resize | all-scroll | zoom-in | | zoom-out | grab | grabbing |

• display

  set display value
  rule is display-<value> or d-<value>

  | Class | Properties | | :----------- | :------------- | | d-table | display:table; | | display-flex | display:flex; |

  enum values

  | Value | | | | :---------: | :---------: | :----------: | | unset | revert | initial | | inherit | list-item | table-row | | table | contents | none | | flow-root | inline-grid | grid | | inline-flex | flex | inline-block | | inline | block | |

• flex-basis

  set flex-basis use nonnegative number and unit or native

  | Class | Properties | | :----------------- | :------------------ | | flex-basis-1 | flex-basis:1px; | | flex-basis-3.25rem | flex-basis:3.25rem; | | flex-basis-auto | flex-basis:auto; |

  enum values

  | Value | | | | :-----: | :-----: | :--: | | initial | inherit | auto |

• flex-direction

  set flex-direction
  support shortcut flex

  | Class | Properties | | :------------------------- | :----------------------------- | | flex-direction-row | flex-direction;row; | | flex-direction-row-reverse | flex-direction;row-reverse; | | flex-column | flex-direction;column; | | flex-column-reverse | flex-direction;column-reverse; |

  enum values

  | Value | | | | | :---: | :---------: | :----: | :------------: | | row | row-reverse | column | column-reverse |

• flex with justify-content and align-items

  set display flex with justify-content with align-items in one className
  rule is flex-<justify>-<align>

  | shortcut | desc | | :------- | :------------ | | between | space-between | | around | space-around | | evenly | space-evenly |

  enum values

  | justify values | align values | | :------------: | :----------: | | center | auto | | start | center | | end | end | | flex-start | flex-end | | flex-end | flex-start | | left | inherit | | right | initial | | space-between | normal | | between | self-end | | space-around | self-start | | around | start | | space-evenly | stretch | | evenly | unset | | stretch | baseline | | inherit | | | initial | | | unset | |

  | normal

  | Class | Properties | | :----------------------- | :------------------------------------------------------------------------- | | flex-center-center | display:flex;justify-content:center;align-items:center; | | flex-flex-start-flex-end | display:flex;justify-content:flex-start;align-items:flex-end; | | flex-between-center | display:flex;justify-content:space-between;align-items:center; |

• align-items

  set align-items enum values look ⬆

  | Class | Properties | | :--------------------- | :---------------------- | | align-items-baseline | align-items:baseline; | | align-items-center | align-items:center; | | align-items-end | align-items:end; | | align-items-flex-start | align-items:flex-start; |

• justify-content

  set justify-content enum values look ⬆

  | Class | Properties | | :---------------------- | :----------------------------- | | justify-content-left | justify-content:left; | | justify-content-between | justify-content:space-between; |

• flex-num

  set sets how a flex item will grow or shrink to fit the space available in its flex container.
  like flex-<number> or native value

  | Class | Properties | | :-------- | :--------- | | flex-0 | flex:0; | | flex-1 | flex:1; | | flex-999 | flex:999; | | flex-auto | flex:auto; |

  support native values

  | Value | | | | :---: | :--: | :--: | | null | auto | none |

• flex-shrink and flex-grow

  set flex-shrink or flex-grow

  | Class | Properties | | :------------------ | :------------------- | | flex-shrink-20 | flex-shrink:20; | | flex-grow-5 | flex-grow:5; | | flex-shrink-initial | flex-shrink:initial; |

  support native values

  | Value | | :-----: | | initial | | inherit |

• flex-wrap

  set flex-wrap
  support shortcut flex

  | Class | Properties | | :------------- | :-------------- | | flex-wrap-wrap | flex-wrap:wrap; |

  enum values

  | Value | | :----------: | | inherit | | initial | | nowrap | | wrap | | wrap-reverse |

• font-size

  set font size
  support shortcut fs

  | Class | Properties | | :------------- | :---------------- | | font-size-12 | flex-wrap:12px; | | font-size-5rem | flex-wrap:5rem; | | fs-0.22vh | flex-wrap:0.22vh; |

• font-weight

  set font weight
  support shortcut fw

  | Class | Properties | | :----------------- | :------------------ | | font-weight-bolder | font-weight:bolder; | | fw-100 | font-weight:100; |

  enum values

  | Value | | | | :-----: | :-----: | :-----: | | 100 | 200 | 300 | | 400 | 500 | 600 | | 700 | 800 | 000 | | bold | bolder | inherit | | initial | lighter | normal | | unset | | |

• gap

  set column-gap and row-gap in one className

  | Class | Properties | | :--------- | :------------------------------------- | | gap-0 | column-gap:0;row-gap:0; | | gap-25.5p | column-gap:25.5%;row-gap:25.5%; | | gap-15% | column-gap:15%;row-gap:15%; | | gap-normal | column-gap:normal;row-gap:normal; |

  enum values

  | Value | | :-----: | | unset | | initial | | inherit | | normal |

• column-gap

  set column-gap with any number unit or native value support shortcut c-gap

  | Class | Properties | | :---------------- | :------------------ | | column-gap-normal | column-gap:normal; | | c-gap-0.25cm | column-gap:0.25cm; | | c-gap-99999 | column-gap:99999px; |

  enum values same gap ⬆️

• row-gap

  set row-gap with any number unit or native value
  support shortcut r-gap
  support native value is unset initial inherit normal

  | Class | Properties | | :------------- | :--------------- | | r-gap-normal | row-gap:normal; | | row-gap-0.25cm | row-gap:0.25cm; | | r-gap-99999 | row-gap:99999px; |

  enum values same gap ⬆️

• letter-spacing

  set letter spacing use any number and unit
  this value has negative number

  | Class | Properties | | :------------------------- | :------------------------ | | letter-spacing-3.1415rem | letter-spacing:3.1415rem | | letter-spacing-m-3.1415rem | letter-spacing:-3.1415rem | | letter-spacing-9999px | letter-spacing:9999px |

• line-height

  set line height use nonnegative number and any unit support shortcut lh

  | Class | Properties | | :------------- | :------------------- | | lh-0.25rem | line-height:0.25rem; | | line-height-20 | line-height:20px; |

• object-fit

  set object file

  | Class | Properties | | :----------------- | :------------------ | | object-fit-fill | object-fit:fill; | | object-fit-contain | object-fit:contain; |

  enum values

  | Value | | | | :-----: | :--------: | :-----: | | fill | contain | cover | | none | scale-down | inherit | | initial | revert | unset |

• opacity

  set opacity (1 to 100 ) ÷ 100

  | Class | Properties | | :--------- | :----------- | | opacity-20 | opacity:0.2 | | opacity-55 | opacity:0.55 |

• orientation

  set orientation with any number any unit
  this value has negative number use -m
  support shortcut t r b l -m

  | Class | Properties | | :------------- | :--------------- | | t-20 | top:20px; | | bottom-3.14rem | bottom:3.14rem; | | b-m-3.14rem | bottom:-3.14rem; | | r-m-60vh | right:-60vh; |

• overflow

  set overflow-x or overflow-y

  | Class | Properties | | :---------------- | :----------------- | | overflow-x-scroll | overflow-x:scroll; | | overflow-y-auto | overflow-y:auto; |

  enum values

  | Value | | :-----: | | hidden | | auto | | visible | | scroll | | inherit |

• position

  set position

  | Class | Properties | | :---------------- | :----------------- | | position-sticky | position:sticky; | | position-absolute | position:absolute; | | position-fixed | position:fixed; |

  enum values

  | Value | | | | :-----: | :------: | :----: | | static | relative | sticky | | unset | absolute | fixed | | inherit | initial | - |

• text-align

  set text-align support shortcut text

  | Class | Properties | | :----------------- | :------------------ | | text-center | text-align:center; | | text-align-justify | text-align:justify; |

  enum values

  | Value | | | | :----------: | :----: | :-----: | | start | end | left | | right | center | justify | | match-parent | - | - |

• text-align-last

  set text-align-last support shortcut text-last

  | Class | Properties | | :-------------------- | :---------------------- | | text-last-center | text-align-last:center; | | text-align-last-start | text-align-last:start; |

  enum values

  | Value | | | | :----: | :-----: | :-----: | | auto | left | right | | center | justify | start | | end | initial | inherit |

• text-decoration

  set text-decoration support shortcut text

  | Class | Properties | | :----------------------- | :------------------------- | | text-underline | text-decoration:underline; | | text-decoration-overline | text-decoration:overline; |

  enum values

  | Value | | | | :----------: | :-------: | :------: | | none | underline | overline | | line-through | blink | inherit |

• text-ellipsis

  set ellipsis support multiline support shortcut ellipsis

  | Class | Properties | | :-------------- | :----------------------------------------------------------------------------------------------------------------------------------- | | ellipsis | overflow: hidden;text-overflow: ellipsis;white-space: nowrap | | ellipsis-2 | overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp:2;-webkit-box-orient: vertical; | | text-ellipsis-5 | overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp:5;-webkit-box-orient: vertical; |

• user-select

  set user-select support shortcut select

  | Class | Properties | | :---------- | :----------- | | select-auto | select:auto; | | select-none | select:none; |

  enum values

  | Value | | | | :---: | :-----: | :-----: | | none | auto | text | | all | contain | element |

• visibility

  set visibility

  | Class | Properties | | :----------------- | :------------------ | | visibility-visible | visibility:visible; | | visibility-hidden | visibility:hidden; |

  enum values

  | Value | | | | :-----: | :-----: | :------: | | visible | hidden | collapse | | inherit | initial | revert | | unset | - | - |

• word-break

  set word-break

  | Class | Properties | | :------------------- | :-------------------- | | word-break-break-all | word-break:break-all; | | word-break-keep-all | word-break:keep-all; |

  enum values

  | Value | | | | :--------: | :-------: | :------: | | normal | break-all | keep-all | | break-word | inherit | initial | | unset | - | - |

• z-index

  set z-index with number
  this value has negative number

  | Class | Properties | | :------------ | :------------- | | z-index-0 | z-index:0; | | z-index-1 | z-index:1; | | z-index-m-5 | z-index:-5; | | z-index-99999 | z-index:99999; |