Security News
JavaScript Leaders Demand Oracle Release the JavaScript Trademark
In an open letter, JavaScript community leaders urge Oracle to give up the JavaScript trademark, arguing that it has been effectively abandoned through nonuse.
@unocss/vite
Advanced tools
@unocss/vite is a utility-first CSS framework that integrates with Vite, a build tool for modern web projects. It provides a highly customizable and performant way to handle CSS in your Vite projects, leveraging the power of utility classes and on-demand generation.
Utility-First CSS
This feature allows you to use utility-first CSS classes in your project. The code sample shows how to integrate Unocss with a Vite project.
import { defineConfig } from 'vite';
import Unocss from '@unocss/vite';
export default defineConfig({
plugins: [
Unocss(),
],
});
On-Demand Generation
Unocss generates CSS on-demand, meaning only the styles you use in your HTML or JavaScript are included in the final build. The code sample demonstrates how to configure Unocss with a preset for on-demand generation.
import { defineConfig } from 'vite';
import Unocss from '@unocss/vite';
export default defineConfig({
plugins: [
Unocss({
presets: [
require('@unocss/preset-uno'),
],
}),
],
});
Customizable
Unocss is highly customizable, allowing you to define your own utility classes and rules. The code sample shows how to add custom rules for margin and padding.
import { defineConfig } from 'vite';
import Unocss from '@unocss/vite';
export default defineConfig({
plugins: [
Unocss({
rules: [
['m-1', { margin: '0.25rem' }],
['p-1', { padding: '0.25rem' }],
],
}),
],
});
Tailwind CSS is another utility-first CSS framework that provides a wide range of utility classes out of the box. Unlike Unocss, Tailwind CSS requires a configuration file and a build step to generate the final CSS.
Windi CSS is a next-generation utility-first CSS framework that is similar to Tailwind CSS but offers faster build times and on-demand generation. It is more similar to Unocss in terms of performance and on-demand capabilities.
Twind is a utility-first CSS-in-JS library that provides the benefits of Tailwind CSS without the need for a build step. It generates styles at runtime, making it more flexible but potentially less performant than Unocss.
The Vite plugin for UnoCSS. Ships with the unocss
package.
Please refer to the documentation.
MIT License © 2021-PRESENT Anthony Fu
FAQs
The Vite plugin for UnoCSS
The npm package @unocss/vite receives a total of 114,776 weekly downloads. As such, @unocss/vite popularity was classified as popular.
We found that @unocss/vite demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 2 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
In an open letter, JavaScript community leaders urge Oracle to give up the JavaScript trademark, arguing that it has been effectively abandoned through nonuse.
Security News
The initial version of the Socket Python SDK is now on PyPI, enabling developers to more easily interact with the Socket REST API in Python projects.
Security News
Floating dependency ranges in npm can introduce instability and security risks into your project by allowing unverified or incompatible versions to be installed automatically, leading to unpredictable behavior and potential conflicts.