{"_rev":"2-9481f6b1744fefd68c28f05ad242e5e7","time":{"created":"2024-01-04T14:03:31.034Z","0.1.0":"2024-01-01T22:23:51.302Z","modified":"2024-01-04T14:03:31.471Z","0.1.1":"2024-01-04T14:03:31.212Z"},"_id":"tailwindcss-grid-areas","name":"tailwindcss-grid-areas","dist-tags":{"latest":"0.1.1"},"versions":{"0.1.1":{"type":"module","name":"tailwindcss-grid-areas","version":"0.1.1","description":"A Tailwind CSS plugin designed to streamline the creation of utility classes for defining grid areas in your layouts. This plugin simplifies the process of specifying grid areas, automatically generating corresponding utility classes that seamlessly integ","private":false,"main":"./dist/index.mjs","module":"./dist/index.mjs","types":"./dist/index.d.ts","scripts":{"build":"unbuild","lint":"eslint src/**/*.ts","format":"eslint src/**/*.ts --fix","test":"vitest","test:precommit":"vitest --watch=false","prepare":"husky install","release-notes":"node ./scripts/release-notes.cjs"},"repository":{"type":"git","url":"git+https://github.com/JaleXHolguin/tailwindcss-grid-areas.git"},"keywords":["tailwindcss","grid-template-areas","utilities","plugin","layout","css"],"author":{"name":"Jonathan Holguin"},"license":"MIT","bugs":{"url":"https://github.com/JaleXHolguin/tailwindcss-grid-areas/issues"},"homepage":"https://github.com/JaleXHolguin/tailwindcss-grid-areas#readme","devDependencies":{"@types/lodash.merge":"^4.6.9","@typescript-eslint/eslint-plugin":"^6.17.0","@typescript-eslint/parser":"^6.17.0","eslint":"^8.56.0","husky":"^8.0.3","lodash.merge":"^4.6.2","prettier":"^3.1.1","tailwindcss":"^3.4.0","typescript":"^5.3.3","unbuild":"^2.0.0","vitest":"^1.1.1"},"peerDependencies":{"tailwindcss":">=3.0.0"},"_id":"tailwindcss-grid-areas@0.1.1","gitHead":"61c81b19954ca37c59bb5b2105f6682f7077341b","_nodeVersion":"18.19.0","_npmVersion":"10.2.3","dist":{"integrity":"sha512-r1Cuhe4Z+ebz74udfHNoLy9A0hY3V+1bo/BBQCfrdNaVC8/ptrUP0CEYQAMT8Lm6/ujCHByMbs2G06Zwbzp0kg==","shasum":"1e6f6d8aaee7b4e2799a00aab792b63139778b79","tarball":"https://registry.npmjs.org/tailwindcss-grid-areas/-/tailwindcss-grid-areas-0.1.1.tgz","fileCount":7,"unpackedSize":10748,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFQstqiAVtYJBPhJQJcMw647FwSNWYq+pbYUUA5+Rud2AiB357pxY1ECTmc60z7UHoCT7wuQtp7/9mLEA16IA+DCZw=="}]},"_npmUser":{"name":"jalexdev","email":"jalex.holguin.dev@gmail.com"},"directories":{},"maintainers":[{"name":"jalexdev","email":"jalex.holguin.dev@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/tailwindcss-grid-areas_0.1.1_1704377011035_0.571812427561786"},"_hasShrinkwrap":false}},"maintainers":[{"name":"jalexdev","email":"jalex.holguin.dev@gmail.com"}],"description":"A Tailwind CSS plugin designed to streamline the creation of utility classes for defining grid areas in your layouts. This plugin simplifies the process of specifying grid areas, automatically generating corresponding utility classes that seamlessly integ","homepage":"https://github.com/JaleXHolguin/tailwindcss-grid-areas#readme","keywords":["tailwindcss","grid-template-areas","utilities","plugin","layout","css"],"repository":{"type":"git","url":"git+https://github.com/JaleXHolguin/tailwindcss-grid-areas.git"},"author":{"name":"Jonathan Holguin"},"bugs":{"url":"https://github.com/JaleXHolguin/tailwindcss-grid-areas/issues"},"license":"MIT","readme":"
\n

TailwindCSS Grid Areas

\n
\n\n
\n \n \"License\"\n \n
\n
\n
\n\nA Tailwind CSS plugin that simplifies the creation of utility classes for defining grid areas in layouts. It streamlines the process of specifying grid areas by generating corresponding utility classes that seamlessly integrate with Tailwind styles.\n\n- [Install](#install)\n- [Working with Arbitrary Values](#working-with-arbitrary-values)\n- [Using Custom Template Areas](#using-custom-template-areas)\n- [Using Responsive Design](#using-responsive-design)\n\n## Install\n\nInstall `tailwindcss-grid-areas` using npm package manager:\n\n```shell\nnpm i -D tailwindcss-grid-areas\n```\n\nImport and add the plugin in your [Tailwind Config](https://tailwindcss.com/docs/configuration#plugins):\n\n```ts\nimport type { Config } from \"tailwindcss\";\nimport { gridAreas } from \"tailwindcss-grid-areas\";\n\nconst config: Config = {\n plugins: [gridAreas()],\n};\n\nexport default config;\n```\n\n### Working with arbitrary values\n\nBy default, you can use arbitrary values for **grid-template-areas** and **grid-areas**. Employ the utility class **grid-areas-[]** to configure **_grid-template-areas_** and use **area-[]** for styling the **_grid-area_** property.\n\n```jsx\n
\n \n
\n```\n\n```css\n/* The class grid-areas-[ham_logo_actions] will generate */\ngrid-template-areas: \"ham logo actions\";\n/* The class area-[ham] will generate */\ngrid-area: ham;\n```\n\nEmploy commas to distinguish distinct areas and utilize underscores to subdivide those areas into multiple sections.\n\n```jsx\n
\n```\n\n```css\n/* The class grid-areas-[ham_logo_actions,search_search_search] will generate */\ngrid-template-areas: \"ham logo actions\" \"search search search\";\n```\n\nIf you have multiple consecutive areas with the same name, as in the case of the \"search\" area in `grid-areas-[ham_logo_actions,search_search_search]`, you can simplify it using the notation **\"search\\*3\"**. For example, `grid-areas-[ham_logo_actions,search*3]`.\n\n### Using custom template areas\n\nWithin the configuration object, use the gridAreas plugin to specify custom template areas for different sections of your layout. For instance, let's consider a header section with specific areas:\n\n```ts\nimport type { Config } from \"tailwindcss\";\nimport { gridAreas } from \"tailwindcss-grid-areas\";\n\nconst config: Config = {\n plugins: [\n gridAreas({\n header: [\"ham logo actions\", \"search search search\"],\n }),\n ],\n};\nexport default config;\n```\n\nNow you can directly use the custom template areas as follows:\n\n```jsx\n
\n \n \n \n
\n
\n```\n\n```css\n/* The class grid-areas-header will generate */\n.grid-areas-header {\n grid-template-areas: \"ham logo actions\" \"search search search\";\n}\n\n/* And it automatically generates the utility classes for each area of the template.*/\n.area-actions {\n grid-area: actions;\n}\n.area-ham {\n grid-area: ham;\n}\n.area-logo {\n grid-area: logo;\n}\n.area-search {\n grid-area: search;\n}\n```\n\n#### Using Responsive Design\n\nTo define a custom template area with responsive behavior, specify the template name as a key, and its corresponding value should be an object containing breakpoints as keys. The values for these breakpoints are arrays that represent the areas and sections of the template:\n\n```ts\nimport type { Config } from \"tailwindcss\";\nimport { gridAreas } from \"tailwindcss-grid-areas\";\n\nconst config: Config = {\n plugins: [\n gridAreas({\n header: {\n // [breakpoint]: areas\n base: [\"ham search\"], // Used to define the base template\n md: [\"ham logo actions\", \"search search search\"],\n lg: [\"logo nav search actions\"],\n },\n }),\n ],\n};\n\nexport default config;\n```\n\nWhen using this template:\n\n```jsx\n
\n```\n\nIt will generate the following utility classes:\n\n```css\n.grid-areas-header {\n grid-template-areas: \"ham search\"; /* Base style */\n}\n@media (min-width: 768px) {\n .grid-areas-header {\n grid-template-areas: \"ham logo actions\" \"search search search\";\n }\n}\n@media (min-width: 1024px) {\n .grid-areas-header {\n grid-template-areas: \"logo nav search actions\";\n }\n}\n\n/* And the utility classes for each area of the template.*/\n```\n\n**Note:** The breakpoints used in the custom template area configuration must be defined in the Tailwind configuration. If you haven't modified the default screens, it will use those by default.\n","readmeFilename":"README.md"}