@unocss/preset-uno
Advanced tools
@unocss/preset-uno is a utility-first CSS framework that provides a comprehensive set of pre-defined classes for rapid UI development. It is part of the UnoCSS ecosystem and offers a wide range of utilities for styling, including layout, typography, colors, and more.
Utility Classes
This feature allows you to use pre-defined utility classes to style your HTML elements. In this example, the `p-4` class adds padding, `bg-blue-500` sets the background color, and `text-white` sets the text color.
<div class="p-4 bg-blue-500 text-white">Hello, World!</div>Responsive Design
UnoCSS provides responsive utility classes that allow you to apply different styles at different breakpoints. In this example, the padding changes based on the screen size: `p-4` for small screens, `md:p-8` for medium screens, and `lg:p-12` for large screens.
<div class="p-4 md:p-8 lg:p-12">Responsive Padding</div>Custom Themes
You can customize the default theme by defining your own colors, spacing, and other design tokens. This example shows how to configure a custom theme with primary and secondary colors.
import { defineConfig } from 'unocss';
import presetUno from '@unocss/preset-uno';
export default defineConfig({
presets: [
presetUno(),
],
theme: {
colors: {
primary: '#1da1f2',
secondary: '#14171a',
},
},
});Tailwind CSS is a utility-first CSS framework similar to @unocss/preset-uno. It provides a wide range of utility classes for rapid UI development. Tailwind CSS is highly customizable and has a large community and ecosystem.
Bootstrap is a popular CSS framework that provides pre-designed components and utility classes. While it is not strictly utility-first like @unocss/preset-uno, it offers a comprehensive set of tools for building responsive and mobile-first websites.
The default preset for UnoCSS.
Please refer to the documentation.
MIT License © 2021-PRESENT Anthony Fu
FAQs
The default preset for UnoCSS
The npm package @unocss/preset-uno receives a total of 127,373 weekly downloads. As such, @unocss/preset-uno popularity was classified as popular.
We found that @unocss/preset-uno 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
Research
An advanced npm supply chain attack is leveraging Ethereum smart contracts for decentralized, persistent malware control, evading traditional defenses.
Security News
Research
Attackers are impersonating Sindre Sorhus on npm with a fake 'chalk-node' package containing a malicious backdoor to compromise developers' projects.
Security News
The npm package for the LottieFiles Player web component was hit with a supply chain attack after a software engineer's npmjs credentials were compromised.