tailwind-child-cap 1.0.0

package/README.md

@@ -0,0 +1,89 @@
+# tailwind-child-cap
+
+`tailwind-child-cap` is a Tailwind CSS plugin designed to control the maximum number of visible child elements within a container. This utility is particularly useful for creating responsive designs where the number of displayed elements needs to be adjusted based on the screen size.
+
+## Features
+
+- Generates utility classes `.child-cap-{n}` to specify the number of visible child elements.
+- Provides `.child-cap-none` to display all child elements, overriding previous cap settings.
+- Fully responsive, allowing different caps at different breakpoints.
+
+## Installation
+
+Install the plugin via npm:
+
+```bash
+npm install -D tailwind-child-cap
+```
+
+## Usage
+
+Add `tailwind-child-cap` to your Tailwind CSS configuration file (`tailwind.config.js`):
+
+```javascript
+// tailwind.config.js
+module.exports = {
+  // ...
+  plugins: [
+    require("tailwind-child-cap"),
+    // ... other plugins
+  ],
+};
+```
+
+Optionally, you can customize the maximum range of the child-cap classes:
+
+```javascript
+// tailwind.config.js
+module.exports = {
+  // ...
+  plugins: [
+    require("tailwind-child-cap")({ maxRange: 30 }),
+    // ...
+  ],
+};
+```
+
+## Examples
+
+### Basic Usage
+
+```html
+<div class="child-cap-3">
+  <div class="item">Item 1</div>
+  <div class="item">Item 2</div>
+  <div class="item">Item 3</div>
+  <div class="item">Item 4</div>
+  <!-- Hidden -->
+</div>
+```
+
+In this example, only the first three child elements will be visible.
+
+### Responsive Design
+
+```html
+<div class="child-cap-2 md:child-cap-4 lg:child-cap-6">
+  <!-- Child elements here -->
+</div>
+```
+
+This setup displays 2 child elements by default, 4 on medium screens, and 6 on large screens.
+
+### Removing the Cap
+
+```html
+<div class="md:child-cap-3 lg:child-cap-none">
+  <!-- Child elements here -->
+</div>
+```
+
+This configuration caps the children to 3 on medium screens and removes the cap on large screens, displaying all children.
+
+## Contributing
+
+Contributions to `tailwind-child-cap` are welcome! Feel free to submit issues or pull requests on GitHub for any bugs, improvements, or new features.
+
+## License
+
+This plugin is licensed under the MIT License. See [LICENSE](LICENSE) for more information.

package/package.json

@@ -0,0 +1,22 @@
+{
+  "name": "tailwind-child-cap",
+  "version": "1.0.0",
+  "description": "A Tailwind CSS plugin to control the maximum number of visible child elements in a container.",
+  "main": "tailwind-child-cap.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "peerDependencies": {
+    "tailwindcss": "^3.0.0"
+  },
+  "keywords": [
+    "tailwindcss",
+    "tailwind",
+    "plugin",
+    "layout",
+    "visibility",
+    "children"
+  ],
+  "author": "Swen de Haan",
+  "license": "MIT"
+}

package/tailwind-child-cap.js

@@ -0,0 +1,40 @@
+
+const plugin = require("tailwindcss/plugin");
+
+/**
+ * Tailwind CSS plugin to control the maximum number of visible child elements in a container.
+ * This plugin generates utility classes in the form of `.child-cap-{n}`, where `{n}` is the number of child elements to display,
+ * and `.child-cap-none` to display all child elements.
+ *
+ * @param {Object} options - Optional. Configuration options for the plugin.
+ */
+const childCapPlugin = plugin(function ({ addUtilities, e, theme }, options = {}) {
+    const maxRange = options.maxRange || 24;
+    const screens = theme("screens", {});
+
+    let newUtilities = {};
+
+    // Function to generate utilities for a given selector.
+    const generateUtilities = (selectorPrefix, maxItems) => {
+        for (let i = 0; i <= maxItems; i++) {
+            const selector = `${selectorPrefix}${i} > *`;
+            const visibleSelector = `${selectorPrefix}${i} > :nth-child(-n+${i})`;
+            newUtilities[selector] = { display: "none" };
+            newUtilities[visibleSelector] = { display: "block" };
+        }
+        newUtilities[`${selectorPrefix}none > *`] = { display: "block" };
+    };
+
+    // Generate base utilities for all ranges.
+    generateUtilities(".child-cap-", maxRange);
+
+    // Generate responsive utilities for each breakpoint.
+    Object.keys(screens).forEach((screen) => {
+        const screenClassPrefix = `.${e(`${screen}:child-cap-`)}`;
+        generateUtilities(screenClassPrefix, maxRange);
+    });
+
+    addUtilities(newUtilities, ["responsive"]);
+});
+
+module.exports = childCapPlugin;