@vicgutt/tailwindcss-feature-detection
    TypeScript icon, indicating that this package has built-in type declarations

    0.1.0 • Public • Published

    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.

    Install

    npm i @vicgutt/tailwindcss-feature-detection

    DownloadsWeekly Downloads

    0

    Version

    0.1.0

    License

    MIT

    Unpacked Size

    76.4 kB

    Total Files

    25

    Last publish

    Collaborators

    • vicgutt