tailwindcss-nth-child-plugin v1.0.0

Tailwind CSS Nth-Child Plugin

A custom plugin for Tailwind CSS that adds support for advanced child-based selectors such as nth-child, nth-last-child, first-child, last-child, odd, even, and more. This plugin allows you to easily style elements based on their position within a container.

Features

This plugin introduces the following Tailwind utility variants:

• nth-[n]: Styles the nth child of a container.
• nth-last-[n]: Styles the nth child from the end of a container.
• first: Styles the first child.
• last: Styles the last child.
• odd: Styles odd-numbered children.
• even: Styles even-numbered children.

• only: Styles an element if it's the only child.

  Installation

  To get started, install the plugin along with Tailwind CSS.

1. Install Tailwind CSS and the nth-child plugin using npm:

   npm install tailwindcss tailwindcss-nth-child-plugin

2. Add the plugin to your tailwind.config.js:

   // tailwind.config.js
   module.exports = {
     theme: {
       extend: {},
     },
     plugins: [
       require('tailwindcss-nth-child-plugin'), // Add the nth-child plugin
     ],
   };

   Usage

   After setting up the plugin, you can use the new utility classes in your HTML. Here are some examples:

   1. Nth-Child

   To target a specific nth child, you can use nth-[n]. This will apply styles to the nth child of the container:

   <div class="nth-[3]:bg-red-500">
     This div will apply the background color to the 3rd child.
   </div>

   2. Nth-Last-Child

   To style the nth child from the end, use nth-last-[n]:

   <div class="nth-last-[2]:text-blue-500">
     This will apply the text color to the 2nd child from the end.
   </div>

   3. First-Child and Last-Child

   You can easily style the first and last child using the first and last variants:

   <div class="first:mb-0 last:mt-4">
     The first child has no bottom margin, and the last child has a top margin.
   </div>

   4. Odd and Even

   To style alternating child elements, you can use odd and even:

   <div class="odd:bg-gray-300 even:bg-green-300">
     Odd children will have a gray background, and even children will have a green background.
   </div>

   5. Only Child

   Use the only variant to target an element that is the only child in its container:

   <div class="only:bg-purple-500">
     This will apply the background color only if the element is the only child.
   </div>

   License

   This project is licensed under the MIT License. See the LICENSE file for details.

   Contributing

   Contributions are welcome! If you'd like to contribute, feel free to submit a pull request or open an issue on the GitHub repository.

   Support and Issues

   If you encounter any issues or have feature requests, please open an issue on the GitHub repository.