What is @unocss/extractor-arbitrary-variants?
@unocss/extractor-arbitrary-variants is a package designed to work with UnoCSS, a utility-first CSS framework. This package allows you to extract and apply arbitrary variants to your CSS classes, enabling more dynamic and flexible styling options.
What are @unocss/extractor-arbitrary-variants's main functionalities?
Arbitrary Variants Extraction
This feature allows you to extract arbitrary variants from a given string. In this example, the 'hover:bg-red-500' variant is extracted and logged.
import { extractorArbitraryVariants } from '@unocss/extractor-arbitrary-variants';
const variants = extractorArbitraryVariants('hover:bg-red-500');
console.log(variants); // Output: ['hover:bg-red-500']
Integration with UnoCSS
This feature demonstrates how to integrate the arbitrary variants extractor with UnoCSS. By adding the extractor to the UnoCSS configuration, you can enable the use of arbitrary variants in your project.
import { defineConfig } from 'unocss';
import { extractorArbitraryVariants } from '@unocss/extractor-arbitrary-variants';
export default defineConfig({
extractors: [
extractorArbitraryVariants(),
],
});
Other packages similar to @unocss/extractor-arbitrary-variants
tailwindcss
Tailwind CSS is a utility-first CSS framework that provides low-level utility classes to build custom designs. While it does not have a direct equivalent to @unocss/extractor-arbitrary-variants, it offers a similar approach to styling with utility classes and supports custom variants through its configuration.
postcss
PostCSS is a tool for transforming CSS with JavaScript plugins. It can be used to create custom plugins that achieve similar functionality to @unocss/extractor-arbitrary-variants, such as extracting and applying custom variants. However, it requires more setup and custom plugin development.
styled-components
Styled-components is a library for React and React Native that allows you to use component-level styles in your application. While it does not provide the same utility-first approach as @unocss/extractor-arbitrary-variants, it offers a way to create dynamic and reusable styles using JavaScript.
Exactor to support arbitrary variants for utilities.
Documentation
Please refer to the documentation.
License
MIT License © 2022-PRESENT Anthony Fu