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.