{"_id":"@antoineguglielmi/tw-grid","name":"@antoineguglielmi/tw-grid","dist-tags":{"latest":"0.0.1"},"versions":{"0.0.1":{"name":"@antoineguglielmi/tw-grid","version":"0.0.1","description":"A grid customization","main":"dist/grid.js","types":"dist/grid.d.ts","scripts":{"build":"tsc","prepublishOnly":"npm run build"},"keywords":["tailwindcss","typescript","grid"],"author":{"name":"Antoine Guglielmi"},"license":"MIT","devDependencies":{"autoprefixer":"^10.4.20","postcss":"^8.4.49","tailwindcss":"^3.4.15","typescript":"^5.0.0"},"_id":"@antoineguglielmi/tw-grid@0.0.1","gitHead":"a57fd5ce6a802212e6fd2c0bcde5a5defc243cbc","_nodeVersion":"20.11.0","_npmVersion":"10.8.3","dist":{"integrity":"sha512-ckR46DPtOhC7JJPird93N23OngouOqJEAmM/EGg0fUGmNV/zs8M5lgRa26xhiXAZHpdnE/tHnmurte8Z9GC26Q==","shasum":"e89497b7129a6f9d61c488015429df6e37b682d2","tarball":"https://registry.npmjs.org/@antoineguglielmi/tw-grid/-/tw-grid-0.0.1.tgz","fileCount":4,"unpackedSize":9034,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDI/e1TlRuFjvPNnTKvlz3nWaxY2Oukd1r3MaMQqGqrngIhAKqJ03cilwjT89TY+McvsN+QSfh1RmrXwImU1D85yv3S"}]},"_npmUser":{"name":"antoineguglielmi","email":"contact.antoine.guglielmi@gmail.com"},"directories":{},"maintainers":[{"name":"antoineguglielmi","email":"contact.antoine.guglielmi@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/tw-grid_0.0.1_1732286953854_0.9237227617013486"},"_hasShrinkwrap":false}},"time":{"created":"2024-11-22T14:49:13.754Z","0.0.1":"2024-11-22T14:49:14.044Z","modified":"2024-11-22T14:49:14.268Z"},"maintainers":[{"name":"antoineguglielmi","email":"contact.antoine.guglielmi@gmail.com"}],"description":"A grid customization","keywords":["tailwindcss","typescript","grid"],"author":{"name":"Antoine Guglielmi"},"license":"MIT","readme":"# @antoineguglielmi/tw-grid\n\nA **TailwindCSS** grid customizer.\n\n## Basic usage\n\n```bash\nnpm i @antoineguglielmi/tw-grid\n```\n\nThen in `tailwind.config.ts` file:\n\n```typescript\nimport { grid, defineGrid } from '@antoineguglielmi/tw-grid'\n\nexport default {\n  content: [\n    './src/pages/**/*.{js,ts,jsx,tsx,mdx}',\n    './src/components/**/*.{js,ts,jsx,tsx,mdx}',\n    './src/app/**/*.{js,ts,jsx,tsx,mdx}',\n  ],\n  theme: {\n    extend: {\n      grid: defineGrid({\n        special: {\n          cols: 3,\n          padding: 'lg-1',\n          gap: '42px',\n          md: {\n            cols: 6,\n          },\n          lg: {\n            cols: 9,\n          },\n        },\n      }),\n    },\n  },\n\n  plugins: [grid()],\n} satisfies Config\n```\n\nYou can define a custom `configKey`:\n\n```typescript\nimport { grid, defineGrid } from '@antoineguglielmi/tw-grid'\n\nexport default {\n  content: [\n    './src/pages/**/*.{js,ts,jsx,tsx,mdx}',\n    './src/components/**/*.{js,ts,jsx,tsx,mdx}',\n    './src/app/**/*.{js,ts,jsx,tsx,mdx}',\n  ],\n  theme: {\n    extend: {\n      // The custom configKey is used here to define grids\n      myGrids: defineGrid({\n        special: {\n          cols: 3,\n          padding: 'lg-1',\n          gap: '42px',\n          md: {\n            cols: 6,\n          },\n          lg: {\n            cols: 9,\n          },\n        },\n      }),\n    },\n  },\n\n  plugins: [grid({ configKey: 'myGrids' })],\n} satisfies Config\n```\n\nBy default, the plugin defines a grid `standard`:\n\n```typescript\ndefineGrid({\n  standard: {\n    cols: 1,\n    gap: '1rem',\n    md: {\n      cols: 2,\n    },\n    lg: {\n      cols: 3,\n    },\n  },\n})\n```\n\n## `defineGrid`\n\nThe `defineGrid` function is not mandatory but provides autocompletion, providing a better developer experience.\n\n## How to define a grid\n\nYou can define a grid with 6 properties:\n\n### `extends`\n\nBy defining the key `extends`, you can copy the style from another grid and override some styles. Provide, as a `string`, the key of the grid you want to extend from, then set properties you want to override:\n\n```typescript\ndefineGrid({\n  'special-plus': {\n    extends: 'special',\n    cols: 12,\n    md: {\n      // You can extend breakpoints from another grid\n      extends: 'standard',\n    },\n  },\n})\n```\n\n### `cols`,`padding`,`gap`,`<breakpoints>`\n\nYou can set the cols number, padding and gap of a grid:\n\n```typescript\n{\n    extends?: string\n    cols?: number\n    padding?: string // Can be a key of the spacings value or a css value\n    gap?: string // Can be a key of the spacings value or a css value\n    `<sm|md|lg|...>`: {\n        extends?: string\n        cols?: number\n        padding?: string\n        gap?: string\n    }\n}\n```\n","readmeFilename":"README.md"}