{"_id":"@barbieswimcrew/tailwindcss-grid-x","_rev":"4-834aefb555dae81188d44527fb8b4345","name":"@barbieswimcrew/tailwindcss-grid-x","description":"A Tailwind CSS plugin that adds an extraordinary grid-x perience","dist-tags":{"latest":"1.1.0"},"versions":{"1.0.0":{"name":"@barbieswimcrew/tailwindcss-grid-x","version":"1.0.0","keywords":["tailwindcss","tailwind","css","tailwind","grid","plugin"],"author":{"name":"Martin Schindler"},"license":"MIT","_id":"@barbieswimcrew/tailwindcss-grid-x@1.0.0","maintainers":[{"name":"barbieswimcrew","email":"ms@dasistweb.de"}],"homepage":"https://github.com/barbieswimcrew/tailwindcss-grid-x#readme","bugs":{"url":"https://github.com/barbieswimcrew/tailwindcss-grid-x/issues"},"dist":{"shasum":"9905581f7c935e17f222641aa962f80b7466fca6","tarball":"https://registry.npmjs.org/@barbieswimcrew/tailwindcss-grid-x/-/tailwindcss-grid-x-1.0.0.tgz","fileCount":4,"integrity":"sha512-44shf+wG17SnsqXklZxhvLEZe2wHUzcwZktxkFeuAqL268hF+eKbPRvp7iRnFqcBpYMfArl8r7lYby7+gdd5/g==","signatures":[{"sig":"MEUCIQDdyxxPqCwUWMXe73RcKzA647LrkoLu2BkB5Ldacaio7wIgD9vQFRkywAh94hEDIa91KQ8oWhKANpzexkv65ByeaWQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":4668},"main":"index.js","gitHead":"18cec5c813031b2ff5249758f6639af6a26be636","_npmUser":{"name":"barbieswimcrew","email":"ms@dasistweb.de"},"repository":{"url":"git+https://github.com/barbieswimcrew/tailwindcss-grid-x.git","type":"git"},"_npmVersion":"9.5.1","description":"A Tailwind CSS plugin that adds an extraordinary grid-x perience","directories":{},"_nodeVersion":"18.16.0","_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/tailwindcss-grid-x_1.0.0_1708695647662_0.7533124610538473","host":"s3://npm-registry-packages"}},"1.0.1":{"name":"@barbieswimcrew/tailwindcss-grid-x","version":"1.0.1","keywords":["tailwindcss","tailwind","css","tailwind","grid","plugin"],"author":{"name":"Martin Schindler"},"license":"MIT","_id":"@barbieswimcrew/tailwindcss-grid-x@1.0.1","maintainers":[{"name":"barbieswimcrew","email":"ms@dasistweb.de"}],"homepage":"https://github.com/barbieswimcrew/tailwindcss-grid-x#readme","bugs":{"url":"https://github.com/barbieswimcrew/tailwindcss-grid-x/issues"},"dist":{"shasum":"a83701cc7f1d1ebff7187d40f961b42fb878c303","tarball":"https://registry.npmjs.org/@barbieswimcrew/tailwindcss-grid-x/-/tailwindcss-grid-x-1.0.1.tgz","fileCount":5,"integrity":"sha512-/pTb9gv8aNsrAmpVFxYDVofERr3ipuvsIdOLc2U4iGijIzsHI4YCzQBM/rjsmLh7k1iCCxb23N4ycog4Dp+yxQ==","signatures":[{"sig":"MEQCIH25Y5OrIXJqEI7yO6JmTC+HahmKY+oc6CzHFqT+K5rnAiB0K0CCxZwLxZ04S/RxhhrlGfraxhCjr/SVtLRBcGmj+w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":86673},"main":"index.js","gitHead":"d5450ed52fb8c494ab2aa4b924f219d12d770e27","_npmUser":{"name":"barbieswimcrew","email":"ms@dasistweb.de"},"repository":{"url":"git+https://github.com/barbieswimcrew/tailwindcss-grid-x.git","type":"git"},"_npmVersion":"9.5.1","description":"A Tailwind CSS plugin that adds an extraordinary grid-x perience","directories":{},"_nodeVersion":"18.16.0","_hasShrinkwrap":false,"peerDependencies":{"tailwindcss":"^1.0 || ^2.0 || ^3.0.0-alpha.1 || ^3.0"},"_npmOperationalInternal":{"tmp":"tmp/tailwindcss-grid-x_1.0.1_1708705170873_0.22122228582205605","host":"s3://npm-registry-packages"}},"1.0.2":{"name":"@barbieswimcrew/tailwindcss-grid-x","version":"1.0.2","keywords":["tailwindcss","tailwind","css","tailwind","grid","plugin"],"author":{"name":"Martin Schindler"},"license":"MIT","_id":"@barbieswimcrew/tailwindcss-grid-x@1.0.2","maintainers":[{"name":"barbieswimcrew","email":"ms@dasistweb.de"}],"homepage":"https://github.com/barbieswimcrew/tailwindcss-grid-x#readme","bugs":{"url":"https://github.com/barbieswimcrew/tailwindcss-grid-x/issues"},"dist":{"shasum":"1243254ffa02660c23ff02d6e2daebd9ea9e3db3","tarball":"https://registry.npmjs.org/@barbieswimcrew/tailwindcss-grid-x/-/tailwindcss-grid-x-1.0.2.tgz","fileCount":5,"integrity":"sha512-RCdyYL4EvVJlgo4/ZG4FVnj/Km79jW+BrJOqFAkYXm71G+ARfRagLBzonieYnZA2bjYekTc7UDNRYP0kSu69Hw==","signatures":[{"sig":"MEYCIQCilntv8Tk65HaVzhzGZD+VpqkSKoaQPUwxHjH4DpE4UQIhAIRXHNcBQ4hL9rsXux+Ge5GkktO5qccJQdQ8sCWYdIJk","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87218},"main":"index.js","gitHead":"2ec67bc778d3526a5da805532869c97a609cfca0","_npmUser":{"name":"barbieswimcrew","email":"ms@dasistweb.de"},"repository":{"url":"git+https://github.com/barbieswimcrew/tailwindcss-grid-x.git","type":"git"},"_npmVersion":"9.5.1","description":"A Tailwind CSS plugin that adds an extraordinary grid-x perience","directories":{},"_nodeVersion":"18.16.0","_hasShrinkwrap":false,"peerDependencies":{"tailwindcss":"^1.0 || ^2.0 || ^3.0.0-alpha.1 || ^3.0"},"_npmOperationalInternal":{"tmp":"tmp/tailwindcss-grid-x_1.0.2_1708948915822_0.4941125688362409","host":"s3://npm-registry-packages"}},"1.0.3":{"name":"@barbieswimcrew/tailwindcss-grid-x","version":"1.0.3","keywords":["tailwindcss","tailwind","css","tailwind","grid","plugin"],"author":{"name":"Martin Schindler"},"license":"MIT","_id":"@barbieswimcrew/tailwindcss-grid-x@1.0.3","maintainers":[{"name":"barbieswimcrew","email":"ms@dasistweb.de"}],"homepage":"https://github.com/barbieswimcrew/tailwindcss-grid-x#readme","bugs":{"url":"https://github.com/barbieswimcrew/tailwindcss-grid-x/issues"},"dist":{"shasum":"79e02179a061bbe3a01ba5672114418852869a04","tarball":"https://registry.npmjs.org/@barbieswimcrew/tailwindcss-grid-x/-/tailwindcss-grid-x-1.0.3.tgz","fileCount":5,"integrity":"sha512-eRjY36UYIpRTK5pfMLchRgoBk4F12sBfyo1sFuFj1dZMYghrgi5d4WnY9fF23ZOL/42ADBM8SYBvHbOVgy/avw==","signatures":[{"sig":"MEYCIQDFkUfYgSh3NjoXGw3Fr/lW4qG2m8StCX5ETYiByWemRwIhAJcRRXUq4cUdaK01f28GQDCec/Jdt43Jc9FqSHzNTfZK","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87352},"main":"index.js","gitHead":"93c420278738da1b957a391f2f70be2a4ff50514","_npmUser":{"name":"barbieswimcrew","email":"ms@dasistweb.de"},"repository":{"url":"git+https://github.com/barbieswimcrew/tailwindcss-grid-x.git","type":"git"},"_npmVersion":"9.5.1","description":"A Tailwind CSS plugin that adds an extraordinary grid-x perience","directories":{},"_nodeVersion":"18.16.0","_hasShrinkwrap":false,"peerDependencies":{"tailwindcss":"^1.0 || ^2.0 || ^3.0.0-alpha.1 || ^3.0"},"_npmOperationalInternal":{"tmp":"tmp/tailwindcss-grid-x_1.0.3_1717442299662_0.16871095241086742","host":"s3://npm-registry-packages"}},"1.1.0":{"name":"@barbieswimcrew/tailwindcss-grid-x","version":"1.1.0","description":"A Tailwind CSS plugin that adds an extraordinary grid-x perience","main":"index.js","repository":{"type":"git","url":"git+https://github.com/barbieswimcrew/tailwindcss-grid-x.git"},"keywords":["tailwindcss","tailwind","css","tailwind","grid","plugin"],"author":{"name":"Martin Schindler"},"license":"MIT","bugs":{"url":"https://github.com/barbieswimcrew/tailwindcss-grid-x/issues"},"homepage":"https://github.com/barbieswimcrew/tailwindcss-grid-x#readme","peerDependencies":{"tailwindcss":"^1.0 || ^2.0 || ^3.0.0-alpha.1 || ^3.0"},"_id":"@barbieswimcrew/tailwindcss-grid-x@1.1.0","gitHead":"0659c56f99cd05cdf57edd611c3f01ea659baf8f","_nodeVersion":"20.15.0","_npmVersion":"10.7.0","dist":{"integrity":"sha512-p88LdCOsvViUz1l936rmDQ0Q5G7myrE/M99UBOxmPHQUdFsp6ADpRwmMERdBiXCSHlLnffQPE53kmnc9kMnzkA==","shasum":"4466740e4ddc4d1fb43c170be01673e17cfcf82b","tarball":"https://registry.npmjs.org/@barbieswimcrew/tailwindcss-grid-x/-/tailwindcss-grid-x-1.1.0.tgz","fileCount":5,"unpackedSize":87367,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICrz8PjsZXR6clpNiX2H55ML+hLmcqsARP4i7CRQOtreAiAZoLbBxu97AtmzAqVHDY0KK5231MYpbRazLIMIog+Nng=="}]},"_npmUser":{"name":"barbieswimcrew","email":"ms@dasistweb.de"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/tailwindcss-grid-x_1.1.0_1719332477876_0.6087908567929672"},"_hasShrinkwrap":false}},"time":{"created":"2024-02-23T13:40:47.542Z","modified":"2024-06-25T16:21:18.299Z","1.0.0":"2024-02-23T13:40:47.894Z","1.0.1":"2024-02-23T16:19:31.025Z","1.0.2":"2024-02-26T12:01:55.997Z","1.0.3":"2024-06-03T19:18:19.870Z","1.1.0":"2024-06-25T16:21:18.109Z"},"maintainers":[{"name":"barbieswimcrew","email":"ms@dasistweb.de"}],"author":{"name":"Martin Schindler"},"repository":{"type":"git","url":"git+https://github.com/barbieswimcrew/tailwindcss-grid-x.git"},"keywords":["tailwindcss","tailwind","css","tailwind","grid","plugin"],"license":"MIT","homepage":"https://github.com/barbieswimcrew/tailwindcss-grid-x#readme","bugs":{"url":"https://github.com/barbieswimcrew/tailwindcss-grid-x/issues"},"readme":"# Tailwind CSS \"grid-x\" Plugin\nA Tailwind CSS plugin that adds an extraordinary *__grid-x-perience__* by adding easy-to-use **full**/**breakout**/**content**/**narrow** grid column template areas.\n\n<img src=\"screenshot.png\" width=\"100%\">\n\n## Install\n\nRequires tailwindcss v1.0 or higher.\n\nInstall the plugin via npm:\n```shell\nnpm install @barbieswimcrew/tailwindcss-grid-x\n```\n\nThen add the plugin to your `tailwind.config.js` file:\n\n```js\n/** @type {import('tailwindcss').Config} */\nmodule.exports = {\n  theme: {\n    // ...\n  },\n  plugins: [\n    require('@barbieswimcrew/tailwindcss-grid-x'),\n    // ...\n  ],\n}\n```\n---\n\n## Basic usage\n\nNow you can use the `.grid-x` component class and the provided `.col-` grid column utilitiy classes to rock your HTML.\n\n```html\n<div class=\"grid-x *:font-bold *:p-2\">\n    <div class=\"col-full bg-amber-200\">.col-full</div>\n    <div class=\"col-full-left bg-amber-300\">.col-full-left</div>\n    <div class=\"col-full-right bg-amber-400\">.col-full-right</div>\n    <div class=\"col-breakout bg-lime-200\">.col-breakout</div>\n    <div class=\"col-breakout-left bg-lime-300\">.col-breakout-left</div>\n    <div class=\"col-breakout-right bg-lime-400\">.col-breakout-right</div>\n    <div class=\"col-content bg-emerald-200\">.col-content</div>\n    <div class=\"col-content-left bg-emerald-300\">.col-content-left</div>\n    <div class=\"col-content-right bg-emerald-400\">.col-content-right</div>\n    <div class=\"col-narrow bg-sky-200\">.col-narrow</div>\n    <div class=\"col-narrow-left bg-sky-300\">.col-narrow-left</div>\n    <div class=\"col-narrow-right bg-sky-400\">.col-narrow-right</div>\n    <!-- ... -->\n</div>\n```\n\n### Choosing the grid column\nThis plugin provides several utility classes for grid template columns.\n\nHere are the regular classes that are being generated:\n| Class                     | Grid template area          |\n| ------------------------- | --------------------------- |\n| `col-content` _(default)_ | Content area                |\n| `col-full`                | Full-width area             |\n| `col-breakout`            | Breakout from content area  |\n| `col-narrow`              | Narrow area                 |\n\n> [!NOTE]\n> If not explicitly set, direct child elements of `.grid-x` are automatically treated like `.col-content`.\n\nIn addition there are classes for specific use cases:\n| Class                     | Grid template area    |\n| ------------------------- | ----------------------------------- |\n| `col-content-left`        | The left side of the content area   |\n| `col-content-right`       | The right side of the content area  |\n| `col-breakout-left`       | The left side of the breakout area  |\n| `col-breakout-right`      | The right side of the breakout area |\n| `col-full-left`           | The left side of the full area      |\n| `col-full-right`          | The right side of the full area     |\n| `col-narrow-left`         | The left side of the narrow area    |\n| `col-narrow-right`        | The right side of the narrow area   |\n\nOf course, it can also be fancy! Just play around a bit yourself and try things like... `col-[narrow-start_/_content-end]` ;-)\n\n---\n\n## Customization\n\n### Configure max-widths and inline paddings\nIt is of course possible to adjust the maximum width of the grid column template areas as well as the paddings towards the side of the browser. Simply override the corresponding css vars in the `styles/app.css` of your project:\n\n```css\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n\n@layer base {\n  :root{\n      --narrow-max-w: 1200px;\n      --content-max-w: 1500px;\n      --breakout-max-w: 1700px;\n      --narrow-px: 1rem;\n      --content-px: 1rem;\n      --breakout-px: 0rem;\n    /* ... */\n  }\n}\n```\n\n### Changing the default class name\n\nIf you need to use a class name other than `grid-x` for any reason, you can do so using the `className` option when registering the plugin:\n\n```js {{ filename: 'tailwind.config.js' }}\n/** @type {import('tailwindcss').Config} */\nmodule.exports = {\n  theme: {\n    // ...\n  },\n  plugins: [\n    require('@barbieswimcrew/tailwindcss-grid-x')({\n      className: 'foo',\n    }),\n  ]\n  ...\n}\n```\n---\n## Copying / License\nThis repository is distributed under the MIT License (MIT). You can find the whole license text in the [LICENSE](LICENSE) file.\n","readmeFilename":"README.md"}