Units reference pixels but they are converted into rem equivalent.
Same syntaxes as @unocss/preset-mini
.
Convert the media / container queries into rem
for more accessibility and desktop-first to be dev friendly and give 4 more levels 3xs 2xs xs 3xl
;
<div class="m-24 w-240 sm:m-12"></div>
.m-24{
margin: 1.5rem; /* x16 = 24px */
}
.w-240{
width: 15rem; /* x16 = 240px */
}
@media screen and (max-width: 40rem){ /* 640px */
.sm\:.m-12{
margin: 0.75rem; /* x16 = 12px */
}
}
First, install unocss and the preset-pruno package as devDepedencies.
npm i -D unocss
npm i -D @enzoaicardi/preset-pruno
Second, add a uno.config.ts
in your projet's root directory.
import { defineConfig } from 'unocss'
import { presetPruno } from '@enzoaicardi/preset-pruno'
export default defineConfig({
cli: {
entry: {
patterns: [/* Paths of files you want to watch : **\/templates/*.{html,twig,liquig} */],
outFile: /* Output file path : assets/css/styles.css */
}
},
presets: [presetPruno()]
})
Third, run the unocss watcher by adding a script in your package.json
.
"scripts": {
"watch": "unocss --watch"
}
Last step, run the watcher and start coding.
npm run watch
If you are using VSCode, consider to use the unocss VSCode extension that can be really helpful. UnoCss for VSCode
For "Pixel as Rem UnoCSS". Thanks to @AnthonyFu for his brilliant job