{"id":20709592,"url":"https://github.com/markusantonwolf/tailwind-css-plugin-multi-columns","last_synced_at":"2025-04-23T04:48:29.784Z","repository":{"id":53465006,"uuid":"324932011","full_name":"markusantonwolf/tailwind-css-plugin-multi-columns","owner":"markusantonwolf","description":"Multi Column utilities for Tailwind CSS - based on your Tailwind CSS theme settings - ready to start without configuration.","archived":false,"fork":false,"pushed_at":"2022-06-17T06:55:04.000Z","size":2287,"stargazers_count":10,"open_issues_count":1,"forks_count":1,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-14T13:12:23.462Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/markusantonwolf.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-12-28T06:37:48.000Z","updated_at":"2022-06-30T06:11:03.000Z","dependencies_parsed_at":"2022-09-17T00:50:28.437Z","dependency_job_id":null,"html_url":"https://github.com/markusantonwolf/tailwind-css-plugin-multi-columns","commit_stats":null,"previous_names":[],"tags_count":9,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/markusantonwolf%2Ftailwind-css-plugin-multi-columns","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/markusantonwolf%2Ftailwind-css-plugin-multi-columns/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/markusantonwolf%2Ftailwind-css-plugin-multi-columns/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/markusantonwolf%2Ftailwind-css-plugin-multi-columns/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/markusantonwolf","download_url":"https://codeload.github.com/markusantonwolf/tailwind-css-plugin-multi-columns/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250372940,"owners_count":21419722,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-17T02:07:05.094Z","updated_at":"2025-04-23T04:48:29.759Z","avatar_url":"https://github.com/markusantonwolf.png","language":"CSS","readme":"# Tailwind CSS Plugin for Multi Column Layout\n\nThe CSS multi-column layout allows easy definition of multiple columns of text - just like in newspapers. This Tailwind CSS plugin adds utilities for you to use all multi-column properties.\n\n**Compatibility: Tailwind CSS ^1.8.3, ^2.X. and ^3.X**\n\n## Quick start - only for development / testing\n\nFor a quick start you can use the following link to start with all utilities. Please don't use this link in youre production environment. For a good developer experience install the plugin and add it to your tailwind.config.js - see [Installation](#user-content-installation).\n\n```html\n\u003clink href=\"https://cdn.jsdelivr.net/gh/markusantonwolf/tailwind-css-plugin-multi-columns/dist/multi-columns.min.css\" rel=\"stylesheet\"\u003e\n```\n\n## Installation\n\n### 1. Install the Tailwind CSS Multi Column plugin:\n\n```bash\n# Install using npm\nnpm install --save-dev @markusantonwolf/tailwind-css-plugin-multi-columns\n# Install using yarn\nyarn add -D @markusantonwolf/tailwind-css-plugin-multi-columns\n```\n\n### 2. Add it to your `tailwind.config.js` file:\n\n```js\n// tailwind.config.js\nmodule.exports = {\n    // ...\n    plugins: [\n        require('@markusantonwolf/tailwind-css-plugin-multi-columns')\n    ]\n}\n```\n\n### 3. Use it 😃 \u003e 🥳 BOOM\n\n## Usage\n\n**The Tailwind CSS Multi Column plugin generates new utilities `.column` and `.rule` in the same way `.border` and `.gap` utilities are generated in Tailwind CSS.**\n\nBy Default the Multi Column Plugin uses your theme and colors so you don't have to redefine your settings - don't copy yourself. Configurated variants apply for columns and column rules - default variant is \"responsive\". To change rendered variants add the plugin information to the config or add it directly to the required plugin:\n\n```js\n// tailwind.config.js\nmodule.exports = {\n    // ...\n    theme: {\n        multiColumns: {\n            span: {\n                test: \"inherit\", // your multi column config\n            },\n        },\n    },\n    // ...\n    variants: {\n        multiColumns: [\"responsive\", \"dark\"]\n    },\n    // ...\n    plugins: [\n        require('@markusantonwolf/tailwind-css-plugin-multi-columns'),\n    ]\n}\n```\n\n```js\n// tailwind.config.js\nmodule.exports = {\n    // ...\n    plugins: [\n        require('@markusantonwolf/tailwind-css-plugin-multi-columns')({\n            span: {\n                test: \"inherit\", // your multi column config\n            },\n            variants: [\"responsive\", \"dark\"],\n        }),\n    ]\n}\n```\n\nLearn more about how to configure Tailwind CSS: [More configurations](#user-content-more-configurations). You can find all available variants in the Tailwind CSS documentation: [Tailwind CSS - Configuring Variants](https://tailwindcss.com/docs/configuring-variants). \n\n## Examples\n\n```html\n\u003cdiv class=\"column-2 column-gap-12 rule rule-dashed rule-gray-500\"\u003e\n    \u003c!-- Content --\u003e\n\u003c/div\u003e\n```\n\n```html\n\u003cdiv class=\"sm:column-2 xl:column-3 sm:column-gap-12 xl:column-gap-24 rule xl:rule-2 rule-dashed rule-gray-900 rule-opacity-50\"\u003e\n    \u003c!-- Content --\u003e\n\u003c/div\u003e\n```\n\n```html\n\u003cdiv class=\"md:column-2 xl:column-3 2xl:column-4 column-gap-12 xl:rule-2 rule-dotted rule-gray-300\"\u003e\n    \u003c!-- Content --\u003e\n\u003c/div\u003e\n```\n\nWith this Tailwind CSS Plugin you can easily the following multi-column properties:\n\n- column-count\n- column-gap\n- column-rule-style\n- column-rule-width\n- column-rule-color\n- column-rule\n- column-span\n- column-width\n\n**You can find a list of all generated utilities here - [All Multi Column utilities](https://github.com/markusantonwolf/tailwind-css-plugin-multi-columns/blob/master/dist/multi-columns.css)**\n\n## More configurations\n\nIn the following example you can see all available options (default values) for the Multi Column plugin. The params `variants`, `styles` and `columns` are replacing the configuration and the other params will get merged with your Tailwind CSS theme.\n\n```js\n// tailwind.config.js\nmodule.exports = {\n    // ...\n    theme: {\n        multiColumns: {\n            styles: [\"dotted\", \"solid\", \"dashed\"],\n            columns: [\"2\", \"3\", \"4\", \"5\", \"6\", \"7\", \"8\", \"9\"],\n            span: [], // merges definitions\n            gaps: [], // merges definitions\n            spacing: [], // merges definitions\n            colors: [], // merges definitions\n            borderWidth: [], // merges definitions\n            opacity: [], // merges definitions\n        },\n    },\n    // ...\n    variants: {\n        multiColumns: [\"responsive\", \"dark\"]\n    },\n    // ...\n    plugins: [\n        require('@markusantonwolf/tailwind-css-plugin-multi-columns'),\n    ]\n}\n```\n\n## Licence\n\nTailwind CSS Plugin Filter utilities is released under the [MIT license](https://github.com/markusantonwolf/tailwind-css-plugin-multi-columns/blob/master/licence.md) \u0026 supports modern environments.\n\n## Copyright\n\n© 2021 Markus A. Wolf\n\u003chttps://www.markusantonwolf.com\u003e\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmarkusantonwolf%2Ftailwind-css-plugin-multi-columns","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmarkusantonwolf%2Ftailwind-css-plugin-multi-columns","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmarkusantonwolf%2Ftailwind-css-plugin-multi-columns/lists"}