Version 1.8.0

- Added JSDoc support
- [breaking] ESM support (dropped CJS)
- Added hocus variants
- [breaking] Rewrote the API
- Can import plugins individually
- [breaking] Renamed `notVariants` to `not`
- [breaking] Renamed `tap-highlight` to `tab`
- [breaking] Renamed `screenToDynamicScreen` to `dynamicScreen`
- [breaking] Removed `resetInputs` and added `resetNumberInput` and `resetSearchInput` utils.
- [breaking] Renamed `fontWeightRegular` to `fontRegular`
- [breaking] Renamed `moreDefaultValues` to `extraDefaults`
- [breaking] Enabled `dynamicScreen` by default

package.json

@@ -1,18 +1,23 @@
 {
     "name": "tailwindcss-addons",
     "description": "A TailwindCSS plugin that adds extra utilities and more.",
-    "version": "1.7.0",
+    "version": "1.8.0",
     "license": "MIT",
-    "main": "src/index.cjs",
+    "main": "./src/index.js",
     "repository": "github:babakfp/tailwindcss-addons",
     "homepage": "https://babakfp.ir/docs/tailwindcss-addons",
     "scripts": {
         "format": "prettier -w ."
     },
     "peerDependencies": {
-        "tailwindcss": "3.x"
+        "tailwindcss": ">= 3.4.1 < 4"
     },
     "devDependencies": {
-        "prettier": "3.2.4"
-    }
+        "prettier": "3.2.5",
+        "tailwindcss": "3.4.1"
+    },
+    "keywords": [
+        "tailwindcss"
+    ],
+    "type": "module"
 }

prettier.config.js

@@ -3,4 +3,4 @@ export default {
     semi: false,
     tabWidth: 4,
     arrowParens: "avoid",
-}  
+}

src/index.js

@@ -0,0 +1,79 @@
+import bgGrid from "./plugins/bgGrid"
+import bgRadial from "./plugins/bgRadial"
+import dir from "./plugins/dir"
+import drag from "./plugins/drag"
+import dynamicScreen from "./plugins/dynamicScreen"
+import extraDefaults from "./plugins/extraDefaults"
+import flexGrid from "./plugins/flexGrid"
+import flip from "./plugins/flip"
+import fontRegular from "./plugins/fontRegular"
+import hideShow from "./plugins/hideShow"
+import hocus from "./plugins/hocus"
+import insetCenter from "./plugins/insetCenter"
+import not from "./plugins/not"
+import overflowUnset from "./plugins/overflowUnset"
+import resetNumberInput from "./plugins/resetNumberInput"
+import resetSearchInput from "./plugins/resetSearchInput"
+import tap from "./plugins/tap"
+
+export {
+    bgGrid,
+    bgRadial,
+    dir,
+    drag,
+    dynamicScreen,
+    extraDefaults,
+    flexGrid,
+    flip,
+    fontRegular,
+    hideShow,
+    hocus,
+    insetCenter,
+    not,
+    overflowUnset,
+    resetNumberInput,
+    resetSearchInput,
+    tap,
+}
+
+/** @param {Options} [options] */
+export default options => [
+    ...(options?.bgGrid || true ? [bgGrid] : []),
+    ...(options?.bgRadial || true ? [bgRadial] : []),
+    ...(options?.dir || true ? [dir] : []),
+    ...(options?.drag || true ? [drag] : []),
+    ...(options?.dynamicScreen || true ? [dynamicScreen] : []),
+    ...(options?.extraDefaults || true ? [extraDefaults] : []),
+    ...(options?.flexGrid || false ? [flexGrid] : []),
+    ...(options?.flip || true ? [flip] : []),
+    ...(options?.fontRegular || false ? [fontRegular] : []),
+    ...(options?.hideShow || true ? [hideShow] : []),
+    ...(options?.hocus || true ? [hocus] : []),
+    ...(options?.insetCenter || true ? [insetCenter] : []),
+    ...(options?.not || true ? [not] : []),
+    ...(options?.overflowUnset || true ? [overflowUnset] : []),
+    ...(options?.resetNumberInput || true ? [resetNumberInput] : []),
+    ...(options?.resetSearchInput || true ? [resetSearchInput] : []),
+    ...(options?.tap || true ? [tap] : []),
+]
+
+/**
+ * @typedef {Object} Options
+ * @property {boolean} [bgGrid] Default: `true`
+ * @property {boolean} [bgRadial] Default: `true`
+ * @property {boolean} [dir] Default: `true`
+ * @property {boolean} [drag] Default: `true`
+ * @property {boolean} [dynamicScreen] Default: `true`
+ * @property {boolean} [extraDefaults] Default: `true`
+ * @property {boolean} [flexGrid] Default: `false`
+ * @property {boolean} [flip] Default: `true`
+ * @property {boolean} [fontRegular] Default: `false`
+ * @property {boolean} [hideShow] Default: `true`
+ * @property {boolean} [hocus] Default: `true`
+ * @property {boolean} [insetCenter] Default: `true`
+ * @property {boolean} [not] Default: `true`
+ * @property {boolean} [overflowUnset] Default: `true`
+ * @property {boolean} [resetNumberInput] Default: `true`
+ * @property {boolean} [resetSearchInput] Default: `true`
+ * @property {boolean} [tap] Default: `true`
+ */

src/lib/flattenColorPalette.js

@@ -0,0 +1,8 @@
+import _flattenColorPalette from "tailwindcss/lib/util/flattenColorPalette"
+
+/**
+ * @param {Record<string, string>} colors
+ */
+export const flattenColorPalette = colors => {
+    return _flattenColorPalette(colors)
+}

src/lib/spacing.js

@@ -0,0 +1,5 @@
+/**
+ * @param {number[]} sizes
+ */
+export const spacing = sizes =>
+    Object.fromEntries(sizes.map(size => [size, `${size / 4}rem`]))

src/utilities/bgGrid.cjs → src/plugins/bgGrid.js

@@ -1,9 +1,8 @@
-const plugin = require("tailwindcss/plugin")
-const {
-    default: flattenColorPalette,
-} = require("tailwindcss/lib/util/flattenColorPalette")
+import plugin from "tailwindcss/plugin"
+import { flattenColorPalette } from "../lib/flattenColorPalette"
 
-module.exports = plugin(({ matchUtilities, theme }) => {
+/** [Docs](https://babakfp.ir/docs/tailwindcss-addons/bg-grid) */
+export default plugin(({ matchUtilities, theme }) => {
     matchUtilities(
         {
             "bg-grid": value => ({

src/utilities/bgRadial.cjs → src/plugins/bgRadial.js

@@ -1,9 +1,8 @@
-const plugin = require("tailwindcss/plugin")
-const {
-    default: flattenColorPalette,
-} = require("tailwindcss/lib/util/flattenColorPalette")
+import plugin from "tailwindcss/plugin"
+import { flattenColorPalette } from "../lib/flattenColorPalette"
 
-module.exports = plugin(({ matchUtilities, theme }) => {
+/** [Docs](https://babakfp.ir/docs/tailwindcss-addons/bg-radial) */
+export default plugin(({ matchUtilities, theme }) => {
     matchUtilities(
         {
             "bg-radial": value => ({

src/utilities/dir.cjs → src/plugins/dir.js

@@ -1,6 +1,7 @@
-const plugin = require("tailwindcss/plugin")
+import plugin from "tailwindcss/plugin"
 
-module.exports = plugin(({ addUtilities }) => {
+/** [Docs](https://babakfp.ir/docs/tailwindcss-addons/dir) */
+export default plugin(({ addUtilities }) => {
     addUtilities({
         ".dir-rtl": {
             direction: "rtl",

src/utilities/drag.cjs → src/plugins/drag.js

@@ -1,6 +1,7 @@
-const plugin = require("tailwindcss/plugin")
+import plugin from "tailwindcss/plugin"
 
-module.exports = plugin(({ addUtilities }) => {
+/** [Docs](https://babakfp.ir/docs/tailwindcss-addons/drag) */
+export default plugin(({ addUtilities }) => {
     addUtilities({
         ".drag-none": {
             "-webkit-user-drag": "none",

src/plugins/dynamicScreen.js

@@ -0,0 +1,29 @@
+import plugin from "tailwindcss/plugin"
+
+/** [Docs](https://babakfp.ir/docs/tailwindcss-addons/dynamic-screen) */
+export default plugin(
+    ({ addBase }) => {
+        addBase({
+            ":root": {
+                "--tw-screen-h": "100vh",
+                "--tw-screen-w": "100vw",
+            },
+        })
+        addBase({
+            ":root": {
+                "--tw-screen-h": "100dvh",
+                "--tw-screen-w": "100dvw",
+            },
+        })
+    },
+    {
+        theme: {
+            extend: {
+                height: { screen: "var(--tw-screen-h)" },
+                maxHeight: { screen: "var(--tw-screen-h)" },
+                minHeight: { screen: "var(--tw-screen-h)" },
+                width: { screen: "var(--tw-screen-w)" },
+            },
+        },
+    },
+)

src/plugins/extraDefaults.js

@@ -0,0 +1,48 @@
+import plugin from "tailwindcss/plugin"
+import { spacing } from "../lib/spacing"
+
+/** [Docs](https://babakfp.ir/docs/tailwindcss-addons/more-default-values) */
+export default plugin(() => {}, {
+    theme: {
+        extend: {
+            spacing: spacing([
+                4.5, 5.5, 6.5, 7.5, 8.5, 9.5, 13, 15, 17, 18, 19, 21, 22, 23,
+            ]),
+            minWidth: ({ theme }) => theme("spacing"),
+            maxWidth: ({ theme }) => theme("spacing"),
+            minHeight: ({ theme }) => theme("spacing"),
+            maxHeight: ({ theme }) => theme("spacing"),
+            zIndex: {
+                1: "1",
+                2: "2",
+                3: "3",
+                4: "4",
+            },
+            blur: {
+                px: "1px",
+                xs: "2px",
+            },
+            borderWidth: {
+                3: "3px",
+            },
+            ringWidth: {
+                3: "3px",
+            },
+            ringOffsetWidth: {
+                3: "3px",
+            },
+            outlineOffset: {
+                3: "3px",
+            },
+            fontSize: {
+                "2xs": ["0.625rem", { lineHeight: "1" }],
+            },
+            letterSpacing: {
+                "widest-2": ".25em",
+                "widest-3": ".5em",
+                "widest-4": ".75em",
+                "widest-5": "1em",
+            },
+        },
+    },
+})