https://github.com/benface/tailwindcss-children
Tailwind CSS plugin to add variants that target child elements
https://github.com/benface/tailwindcss-children
Last synced: about 1 year ago
JSON representation
Tailwind CSS plugin to add variants that target child elements
- Host: GitHub
- URL: https://github.com/benface/tailwindcss-children
- Owner: benface
- License: isc
- Archived: true
- Created: 2019-05-26T18:53:49.000Z (about 7 years ago)
- Default Branch: main
- Last Pushed: 2022-02-22T12:00:33.000Z (over 4 years ago)
- Last Synced: 2024-08-01T22:45:54.449Z (almost 2 years ago)
- Language: JavaScript
- Homepage:
- Size: 1.17 MB
- Stars: 141
- Watchers: 3
- Forks: 7
- Open Issues: 12
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE.md
Awesome Lists containing this project
README
# ⛔️ DEPRECATED
This plugin doesn’t work properly with Tailwind 3.0. Please use [`tailwind-children`](https://github.com/SamGoody/tailwind-children) instead. Thank you!
# Children Variant Plugin for Tailwind CSS
## Requirements
This plugin requires Tailwind CSS 1.2 or later. If your project uses an older version of Tailwind, you should install the latest 1.x version of this plugin (`npm install tailwindcss-children@1.x`).
## Installation
```bash
npm install tailwindcss-children
```
## Usage
```js
// tailwind.config.js
module.exports = {
variants: {
display: ['children', 'default', 'children-first', 'children-last', 'children-odd', 'children-even', 'children-not-first', 'children-not-last', 'children-hover', 'hover', 'children-focus', 'focus', 'children-focus-within', 'focus-within', 'children-active', 'active', 'children-visited', 'visited', 'children-disabled', 'disabled', 'responsive'],
},
plugins: [
require('tailwindcss-children'),
],
};
```
The above configuration would generate the following CSS:
```css
.children\:block > * {
display: block;
}
.block {
display: block;
}
.children\:first\:block > :first-child {
display: block;
}
.children\:last\:block > :last-child {
display: block;
}
.children\:odd\:block > :nth-child(odd) {
display: block;
}
.children\:even\:block > :nth-child(even) {
display: block;
}
.children\:not-first\:block > :not(:first-child) {
display: block;
}
.children\:not-last\:block > :not(:last-child) {
display: block;
}
.children\:hover\:block > :hover {
display: block;
}
.hover\:block:hover {
display: block;
}
.children\:focus\:block > :focus {
display: block;
}
.focus\:block:focus {
display: block;
}
.children\:focus-within\:block > :focus-within {
display: block;
}
.focus-within\:block:focus-within {
display: block;
}
.children\:active\:block > :active {
display: block;
}
.active\:block:active {
display: block;
}
.children\:visited\:block > :visited {
display: block;
}
.visited\:block:visited {
display: block;
}
.children\:disabled\:block > :disabled {
display: block;
}
.disabled\:block:disabled {
display: block;
}
/* etc. */
```
Which you can then use in your HTML like this:
```html
-
First item
-
Second item
-
Last item, this one doesn't have a bottom border
```
You can also override `children:` classes on specific children if needed:
```html
-
First item
-
Second item, this one has a red background
-
Third item, this one has a blue background
-
Last item
```
The above depends on the order of the generated CSS, so make sure to add the `default` variant *after* the `children` one in the array of variants (as well as the `hover` variant after the `children-hover` variant if you want to override a `children:hover:*` utility, etc.).