Initial commit

.gitignore

@@ -0,0 +1 @@
+/node_modules/

.release-it.json

@@ -0,0 +1,5 @@
+{
+  "git": {
+    "tagName": "v%s"
+  }
+}

CHANGELOG.md

@@ -0,0 +1,13 @@
+# Changelog
+
+All notable changes to this project will be documented in this file.
+
+The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
+and this project mostly adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
+
+## [1.0.0] - 2019-02-14
+
+Initial release
+
+[Unreleased]: https://github.com/benface/tailwindcss-children/compare/v2.0.0...HEAD
+[1.0.0]: https://github.com/benface/tailwindcss-children/releases/tag/v1.0.0

README.md

@@ -0,0 +1,82 @@
+# Children Variant Plugin for Tailwind CSS
+
+## Installation
+
+```bash
+npm install tailwindcss-children
+```
+
+## Usage
+
+```js
+// tailwind.config.js
+{
+  variants: {
+    display: ['children', 'default', 'first-child', 'last-child', 'responsive'],
+    borderWidth: ['children', 'default', 'first-child', 'last-child', 'responsive'],
+    borderColor: ['children', 'default', 'first-child', 'last-child', 'responsive'],
+  },
+  plugins: [
+    require('tailwindcss-children')(),
+  ],
+}
+```
+
+The above configuration would generate the following classes:
+
+```css
+.children\:block > * {
+  display: block;
+}
+
+.block {
+  display: block;
+}
+
+.first-child\:block:first-child {
+  display: block;
+}
+
+.last-child\:block:last-child {
+  display: block;
+}
+
+/* etc. */
+```
+
+Which you can then use in your HTML like this:
+
+```html
+<ul class="children:block children:border-b children:border-black last-child:border-b-0">
+  <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.

index.js

@@ -0,0 +1,23 @@
+const _ = require('lodash');
+
+module.exports = function() {
+  return ({ addVariant, e }) => {
+    addVariant('children', ({ modifySelectors, separator }) => {
+      modifySelectors(({ className }) => {
+        return `.${e(`children${separator}${className}`)} > *`;
+      });
+    });
+
+    addVariant('first-child', ({ modifySelectors, separator }) => {
+      modifySelectors(({ className }) => {
+        return `.${e(`first-child${separator}${className}`)} > :first-child`;
+      });
+    });
+
+    addVariant('last-child', ({ modifySelectors, separator }) => {
+      modifySelectors(({ className }) => {
+        return `.${e(`last-child${separator}${className}`)} > :last-child`;
+      });
+    });
+  };
+};