0.0.6 • Published 3 years ago
tailwindcss-nth-child v0.0.6
Tailwindcss Nth Child Variants Plugin
This repository is a plug in for Tailwindcss
Installation
Install the plugin via npm:
npm install tailwindcss-nth-child
tailwind.config.js
Create an instance like this.
const Nth = require('tailwindcss-nth-child');
const plugin = new Nth('<nth-value>')
module.exports = {
// ...
variants: {
// extend the backgroundColor variants
extend:{
backgroundColor: ['nth-child'],
}
},
plugins: [
plugin.nthChild() // add-plugin
],
}
Extending the variants is important.
Value of <nth-value>
You need to give nth-value in constructor method. Check the below examples.
odd
To select odd child:
const plugin = new Nth('odd')
even
To select even child
const plugin = new Nth('even')
first child
It is simple just write 1 inside of constructor method. To select first child:
const plugin = new Nth('1')
(x)n+(y)
You can write which elements you want to select accordingly. You can check here for usage of css nth-child
const plugin = new Nth('2n+1')
Examples
Lets test with even child
const Example = () => {
return (
<div className="nth-child:bg-red-400 transform first-child:rotate-45">
<div className="">Example 1</div>
<div className="">Example 2</div>
<div className="">Example 3</div>
<div className="">Example 4</div>
<div className="">Example 5</div>
<div className="">Example 6</div>
</div>
);
};
Result:
TO-DO
- Add nth-child selector
- Add last-child selector
- Add important modifier
0.0.4-alpha
3 years ago
0.0.3
3 years ago
0.0.2
3 years ago
0.0.4-beta
3 years ago
0.0.5
3 years ago
0.0.4
3 years ago
0.0.6
3 years ago
0.0.1
3 years ago