@vicgutt/tailwindcss-feature-detection NPM

An easy way to add feature detection to your TailwindCSS project

This plugin allows you to easily add CSS feature detection to your project either by making use of the @supports at-rule or by adding a class to your HTML. Here's a quick example:

// tailwind.config.js

module.exports = {
    theme: {
        // ...
    },
    variants: {
        extend: {
            grid: ['has-grid-support'],
            gridTemplateColumns: ['has-grid-support'],
            display: ['ie-😱'],
        },
    },
    plugins: [
        require('@vicgutt/tailwindcss-feature-detection')([
            {
                name: 'ie-😱',
                strategy: 'class',
            },
            {
                name: 'has-grid-support',
                strategy: 'atRule',
                atRule: {
                    name: 'supports',
                    params: '(display: grid) and (gap: 1em)',
                },
            },
        ]),
    ],
};

<html class="ie-😱">
    ...

    <section class="flex has-grid-support:grid has-grid-support:grid-cols-3 ie-😱:hidden">
        ...
    </section>
</html>

Output

/* Well actually it'll be resolved into ".ie-\1F631 .ie-\1F631\:hidden" but let's pretend 👀 */
.ie-\😱 .ie-\😱\:hidden {
    display: none;
}

@supports (display: grid) and (gap: 1em) {
    .has-grid-support\:grid {
        display: grid
    }
    .has-grid-support\:grid-cols-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr))
    }
}

Installation

Install the plugin via NPM (or yarn):

# Using npm
npm i @vicgutt/tailwindcss-feature-detection

# Using Yarn
yarn add @vicgutt/tailwindcss-feature-detection

Then add the plugin to your tailwind.config.js file:

// tailwind.config.js

module.exports = {
    plugins: [
        require('@vicgutt/tailwindcss-feature-detection')([]),
    ],
};

Configuring the variants

The plugin expects an array of variants to be passed in. Each variant is an object that can have the follwing properties:

Property	Required	Type	Description
name	true	string	The Tailwind variant name.
strategy	true	'class' \| 'atRule'	The "strategy" to use when registering the variant. Should it require a class on the HTML or make use of feature queries.
atRule	true if strategy === 'atRule'	postcss's "AtRuleProps" \| undefined	Configuring the at-rule.
parentClassName	false even when strategy === 'class'	string \| undefined	Specifying the class that will be set in the HTML code. If it is not defined, the variant's name will be used.
enabled	false	boolean \| undefined	Whether or not this variant should be skipped.

And postcss's "AtRuleProps" object can have the follwing properties:

Property	Required	Type	Description
name	true	string	Name of the at-rule.
params	false	string \| number \| undefined	Parameters following the name of the at-rule.
raws	false	AtRuleRaws \| undefined	Information used to generate byte-to-byte equal node string as it was in the origin input.

Provided defaults

A set of default variants are conveniently provided. To know what those defaults are, please take a look at the src/defaults.ts file.

Then in your tailwind.config.js file:

// tailwind.config.js

module.exports = {
    plugins: [
        require('@vicgutt/tailwindcss-feature-detection')(require('@vicgutt/tailwindcss-feature-detection/defaults')),
    ],
};

Contributing

If you're interested in contributing to the project, please read our contributing docs before submitting a pull request.

License

The MIT License (MIT). Please see License File for more information.

tailwindcss tailwind tailwind-plugin feature query feature detection browser detection

tailwindcss

@everything-registry/sub-chunk-983 @vicgutt/tailwindcss-opinionated-preset

0.1.0

3 years ago