Skip to content

An easy way to add feature detection to your TailwindCSS project

License

Notifications You must be signed in to change notification settings

VicGUTT/tailwindcss-feature-detection

Repository files navigation

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/dist/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.