HTML
<div h-full text-center flex select-none all:transition-400>
<div ma>
<div text-5xl fw100 animate-bounce-alt animate-count-infinite animate-duration-1s>
UnoCSS
</div>
<div op30 text-lg fw300 m1>
The instant on-demand Atomic CSS engine.
</div>
<div m2 flex justify-center text-2xl op30 hover="op80">
<a
i-carbon-logo-github
text-inherit
href="https://github.com/unocss/unocss"
target="_blank"
></a>
</div>
</div>
</div>
<div absolute bottom-5 right-0 left-0 text-center op30 fw300>
on-demand · instant · fully customizable
</div>
Config
import {
defineConfig,
presetAttributify,
presetIcons,
presetUno,
} from 'unocss'
export default defineConfig({
rules: [
['custom-rule', { color: 'red' }],
],
shortcuts: {
'custom-shortcut': 'text-lg text-orange hover:text-teal',
},
presets: [
presetUno(),
presetAttributify(),
presetIcons({
scale: 1.2,
cdn: 'https://esm.sh/',
}),
],
})
Custom CSS
/* Write custom CSS here, and transformer support. For example: */
/* .custom {
font-weight: 500;
@apply p1 text-(white xl);
background-color: theme('colors.red.400');
} */
Output CSS
/* layer: icons */
.i-carbon-logo-github,
[i-carbon-logo-github=""]{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 32 32' width='1.2em' height='1.2em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' fill-rule='evenodd' d='M16 2a14 14 0 0 0-4.43 27.28c.7.13 1-.3 1-.67v-2.38c-3.89.84-4.71-1.88-4.71-1.88a3.7 3.7 0 0 0-1.62-2.05c-1.27-.86.1-.85.1-.85a2.94 2.94 0 0 1 2.14 1.45a3 3 0 0 0 4.08 1.16a2.93 2.93 0 0 1 .88-1.87c-3.1-.36-6.37-1.56-6.37-6.92a5.4 5.4 0 0 1 1.44-3.76a5 5 0 0 1 .14-3.7s1.17-.38 3.85 1.43a13.3 13.3 0 0 1 7 0c2.67-1.81 3.84-1.43 3.84-1.43a5 5 0 0 1 .14 3.7a5.4 5.4 0 0 1 1.44 3.76c0 5.38-3.27 6.56-6.39 6.91a3.33 3.33 0 0 1 .95 2.59v3.84c0 .46.25.81 1 .67A14 14 0 0 0 16 2'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;width:1.2em;height:1.2em;}
/* layer: default */
.absolute,
[absolute=""]{position:absolute;}
.bottom-5,
[bottom-5=""]{bottom:1.25rem;}
.left-0,
[left-0=""]{left:0;}
.right-0,
[right-0=""]{right:0;}
.m2,
[m2=""]{margin:0.5rem;}
[m1=""]{margin:0.25rem;}
[ma=""]{margin:auto;}
.h-full,
[h-full=""]{height:100%;}
.flex,
[flex=""]{display:flex;}
@keyframes bounce-alt{from,20%,53%,80%,to{animation-timing-function:cubic-bezier(0.215,0.61,0.355,1);transform:translate3d(0,0,0)}40%,43%{animation-timing-function:cubic-bezier(0.755,0.05,0.855,0.06);transform:translate3d(0,-30px,0)}70%{animation-timing-function:cubic-bezier(0.755,0.05,0.855,0.06);transform:translate3d(0,-15px,0)}90%{transform:translate3d(0,-4px,0)}}
.animate-bounce-alt,
[animate-bounce-alt=""]{animation:bounce-alt 1s linear infinite;transform-origin:center bottom;}
[animate-duration-1s=""]{animation-duration:1s;}
.animate-count-infinite,
[animate-count-infinite=""]{animation-iteration-count:infinite;}
.select-none,
[select-none=""]{-webkit-user-select:none;user-select:none;}
.justify-center,
[justify-center=""]{justify-content:center;}
.text-center,
[text-center=""]{text-align:center;}
.text-2xl,
[text-2xl=""]{font-size:1.5rem;line-height:2rem;}
.text-5xl,
[text-5xl=""]{font-size:3rem;line-height:1;}
.text-lg,
[text-lg=""]{font-size:1.125rem;line-height:1.75rem;}
.text-inherit,
[text-inherit=""]{color:inherit;}
.fw100,
[fw100=""]{font-weight:100;}
.fw300,
[fw300=""]{font-weight:300;}
.op30,
[op30=""]{opacity:0.3;}
.op80{opacity:0.8;}
[hover~="op80"]:hover{opacity:0.8;}
[all\:transition-400=""] *{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:400ms;}