# tailwindcss-children

> Tailwind CSS plugin to add variants that target child elements

Latest version **2.1.0** (published 2020-05-10) · ISC license · 0 weekly downloads

> **Deprecated.** This package is deprecated.

## Install

```sh
npm install tailwindcss-children
pnpm add tailwindcss-children
yarn add tailwindcss-children
bun add tailwindcss-children
```

## Health

**Score 10/100 (F)** — status: deprecated.

Negative: deprecated.

## Facts

| | |
|---|---|
| Version | 2.1.0 |
| Published | 2020-05-10 |
| First published | 2019-05-26 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 2 |
| Unpacked size | 15.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 139 |
| Author | Benoît Rouleau |
| Maintainers | benface |

## Links

- npm: https://www.npmjs.com/package/tailwindcss-children
- Repository: https://github.com/benface/tailwindcss-children
- Issues: https://github.com/benface/tailwindcss-children/issues
- npm.io page: https://npm.io/package/tailwindcss-children

## Dependencies (2)

- [lodash](https://npm.io/package/lodash.md) ^4.17.15
- [postcss-selector-parser](https://npm.io/package/postcss-selector-parser.md) ^6.0.2

## Recent versions

- 2.1.0 (latest) — 2020-05-10
- 2.0.0 — 2020-02-05
- 1.3.0 — 2019-12-20
- 1.2.0 — 2019-09-02
- 1.1.0 — 2019-07-08
- 1.0.0 — 2019-05-26

## README

# 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
<ul class="children:block children:not-first:border-t children:border-gray children:hover:bg-gray">
  <li>
    First item
  </li>
  <li>
    Second item
  </li>
  <li>
    Last item, this one doesn't have a bottom border
  </li>
</ul>
```

You can also override `children:` classes on specific children if needed:

```html
<ul class="children:block children:bg-gray">
  <li>
    First item
  </li>
  <li class="bg-red">
    Second item, this one has a red background
  </li>
  <li class="bg-blue">
    Third item, this one has a blue background
  </li>
  <li>
    Last item
  </li>
</ul>
```

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.).

---
_Source: https://npm.io/package/tailwindcss-children · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._