@vicgutt/tailwindcss-feature-detection
v0.1.0
Published
An easy way to add feature detection to your TailwindCSS project
Maintainers
vicguttReadme
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-detectionThen 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.