Release 2.0.0

.release-it.json

@@ -1,5 +1,6 @@
 {
   "git": {
-    "tagName": "v%s"
+    "tagName": "v%s",
+    "requireCleanWorkingDir": false
   }
 }

CHANGELOG.md

@@ -5,7 +5,10 @@ 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).
 
-## [2.0.0] - XXXX-XX-XX
+## [2.0.0] - 2020-02-05
+
+### Added
+- Added a `children-not-first` variant (e.g. `children:not-first:border-t`)
 
 ### Changed
 - Changed to use Tailwind 1.2’s new plugin definition syntax

README.md

@@ -12,7 +12,7 @@ npm install tailwindcss-children
 // tailwind.config.js
 module.exports = {
   variants: {
-    display: ['children', 'default', 'children-first', 'children-last', 'children-odd', 'children-even', 'children-hover', 'hover', 'children-focus', 'focus', 'children-focus-within', 'focus-within', 'children-active', 'active', 'children-visited', 'visited', 'children-disabled', 'disabled', 'responsive'],
+    display: ['children', 'default', 'children-first', 'children-last', 'children-odd', 'children-even', 'children-not-first', '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'),
@@ -47,6 +47,10 @@ The above configuration would generate the following CSS:
   display: block;
 }
 
+.children\:not-first\:block > * + * {
+  display: block;
+}
+
 .children\:hover\:block > :hover {
   display: block;
 }
@@ -101,7 +105,7 @@ The above configuration would generate the following CSS:
 Which you can then use in your HTML like this:
 
 ```html
-<ul class="children:block children:border-b children:border-gray children:last:border-b-0 children:hover:bg-gray">
+<ul class="children:block children:not-first:border-t children:border-gray children:hover:bg-gray">
   <li>
     First item
   </li>
@@ -133,4 +137,4 @@ You can also override `children:` classes on specific children if needed:
 </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.).
+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.).

index.js

@@ -18,15 +18,15 @@ const childrenVariant = function(pseudoClass = null, childrenSelector = null) {
 
 module.exports = plugin(function({ addVariant }) {
   addVariant('children', childrenVariant());
+  addVariant('children-first', childrenVariant('first', ':first-child'));
+  addVariant('children-last', childrenVariant('last', ':last-child'));
+  addVariant('children-odd', childrenVariant('odd', ':nth-child(odd)'));
+  addVariant('children-even', childrenVariant('even', ':nth-child(even)'));
+  addVariant('children-not-first', childrenVariant('not-first', '* + *'));
   addVariant('children-hover', childrenVariant('hover'));
   addVariant('children-focus', childrenVariant('focus'));
   addVariant('children-focus-within', childrenVariant('focus-within'));
   addVariant('children-active', childrenVariant('active'));
   addVariant('children-visited', childrenVariant('visited'));
   addVariant('children-disabled', childrenVariant('disabled'));
-  addVariant('children-first', childrenVariant('first', ':first-child'));
-  addVariant('children-last', childrenVariant('last', ':last-child'));
-  addVariant('children-odd', childrenVariant('odd', ':nth-child(odd)'));
-  addVariant('children-even', childrenVariant('even', ':nth-child(even)'));
-  addVariant('children-not-first', childrenVariant('not-first', '* + *'));
 });