Wondering what’s next for npm?Check out our public roadmap! »

    tailwindcss-multiple-columns

    1.0.0 • Public • Published

    Tailwindcss-multiple-columns

    Plugin for Tailwind CSS that adds support for the multi-column properties

    GitHub package.json version GitHub license npm bundle size semantic-release GitHub issues Twitter

    CSS Multi-column layout

    CSS Multi-column Layout is a module of CSS that adds support for multi-column layouts. Support is included for establishing the number of columns in a layout, as well as how content should flow from column to column, gap sizes between columns, and column dividing lines (known as column rules) along with their appearance. MDN documentation.

    NOTE: This has nothing to do with flexbox or CSS grid layouts and their columns. CSS multi-column layout is a completely separate way to create columns of content.

    Installation

    NPM

    npm install tailwindcss-multiple-columns --save-dev

    Yarn

    yarn add tailwindcss-multiple-columns -D

    Usage

    Configuration

    Add the plugin to your tailwind.config.js (after you've installed it as described above).

    // tailwind.config.js
    module.exports = {
      theme: {
        // ..
      },
      variants: {
        // ..
      },
      plugins: [
        // ..
        require('tailwindcss-multiple-columns'),
      ],
    };

    HTML

    Then in your HTML you can use the classes just like any of the default Tailwind CSS classes

    <div class="col-count-3 col-rule-dotted col-gap-8">
      <h1 class="col-span-all text-center">Full width title</h1>
      <p>
        These paragraphs will automatically be arranged to three vertical columns and the text will flow
        from one column to the next one without any extra work.
      </p>
      <p>
        You can change the spacing of the columns and you can also add a line between the columns which
        is called a "column-rule".
      </p>
      <p>
        The individual elements can also span across multiple columns if you want a header to span all
        the columns for example.
      </p>
    </div>

    And the result would look like this:

    Result

    Features

    The following new classes are added in this package:

    Column-count

    The column-count CSS property breaks an element's content into the specified number of columns.

    For more detailed information about which CSS properties can be used with each of these, please refer to the MDN documentation.

    License

    MIT

    Install

    npm i tailwindcss-multiple-columns

    DownloadsWeekly Downloads

    9

    Version

    1.0.0

    License

    MIT

    Unpacked Size

    31.7 kB

    Total Files

    10

    Last publish

    Collaborators

    • avatar