Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/markusantonwolf/tailwind-css-plugin-multi-columns

Multi Column utilities for Tailwind CSS - based on your Tailwind CSS theme settings - ready to start without configuration.
https://github.com/markusantonwolf/tailwind-css-plugin-multi-columns

Last synced: about 2 months ago
JSON representation

Multi Column utilities for Tailwind CSS - based on your Tailwind CSS theme settings - ready to start without configuration.

Host: GitHub
URL: https://github.com/markusantonwolf/tailwind-css-plugin-multi-columns
Owner: markusantonwolf
License: mit
Created: 2020-12-28T06:37:48.000Z (about 4 years ago)
Default Branch: master
Last Pushed: 2022-06-17T06:55:04.000Z (over 2 years ago)
Last Synced: 2024-10-13T01:19:41.988Z (3 months ago)
Language: CSS
Size: 2.18 MB
Stars: 10
Watchers: 3
Forks: 1
Open Issues: 0
Metadata Files:
- Readme: README.md

Awesome Lists containing this project

README

# Tailwind CSS Plugin for Multi Column Layout

The 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.

**Compatibility: Tailwind CSS ^1.8.3, ^2.X. and ^3.X**

## Quick start - only for development / testing

For 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).

```html

```

## Installation

### 1. Install the Tailwind CSS Multi Column plugin:

```bash
# Install using npm
npm install --save-dev @markusantonwolf/tailwind-css-plugin-multi-columns
# Install using yarn
yarn add -D @markusantonwolf/tailwind-css-plugin-multi-columns
```

### 2. Add it to your `tailwind.config.js` file:

```js
// tailwind.config.js
module.exports = {
// ...
plugins: [
require('@markusantonwolf/tailwind-css-plugin-multi-columns')
]
}
```

### 3. Use it 😃 > 🥳 BOOM

## Usage

**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.**

By 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:

```js
// tailwind.config.js
module.exports = {
// ...
theme: {
multiColumns: {
span: {
test: "inherit", // your multi column config
},
},
},
// ...
variants: {
multiColumns: ["responsive", "dark"]
},
// ...
plugins: [
require('@markusantonwolf/tailwind-css-plugin-multi-columns'),
]
}
```

```js
// tailwind.config.js
module.exports = {
// ...
plugins: [
require('@markusantonwolf/tailwind-css-plugin-multi-columns')({
span: {
test: "inherit", // your multi column config
},
variants: ["responsive", "dark"],
}),
]
}
```

Learn 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).

## Examples

```html

```

```html

```

```html

```

With this Tailwind CSS Plugin you can easily the following multi-column properties:

- column-count
- column-gap
- column-rule-style
- column-rule-width
- column-rule-color
- column-rule
- column-span
- column-width

**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)**

## More configurations

In 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.

```js
// tailwind.config.js
module.exports = {
// ...
theme: {
multiColumns: {
styles: ["dotted", "solid", "dashed"],
columns: ["2", "3", "4", "5", "6", "7", "8", "9"],
span: [], // merges definitions
gaps: [], // merges definitions
spacing: [], // merges definitions
colors: [], // merges definitions
borderWidth: [], // merges definitions
opacity: [], // merges definitions
},
},
// ...
variants: {
multiColumns: ["responsive", "dark"]
},
// ...
plugins: [
require('@markusantonwolf/tailwind-css-plugin-multi-columns'),
]
}
```

## Licence

Tailwind CSS Plugin Filter utilities is released under the [MIT license](https://github.com/markusantonwolf/tailwind-css-plugin-multi-columns/blob/master/licence.md) & supports modern environments.