@unocss/extractor-arbitrary-variants

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.

README

@unocss/extractor-arbitrary-variants

Exactor to support arbitrary variants for utilities.

Documentation

Please refer to the documentation.

License

MIT License © 2022-PRESENT Anthony Fu