tailwindcss-grid-placement

0.0.2 • Public • Published

Install

npm install tailwindcss-grid-placement

Add the plugin to your tailwind config file

module.exports = {
    plugins: [require("tailwindcss-grid-placement")]
};

Usage

Utility classes start with "content", "items" or "self" followed by the direction "x" or "y". These are all the generated CSS classes:

.items-x-start {
    align-content: start;
}
 
.items-x-end {
    align-content: end;
}
 
.items-x-left {
    align-content: left;
}
 
.items-x-right {
    align-content: right;
}
 
.items-x-center {
    align-content: center;
}
 
.items-x-stretch {
    align-content: stretch;
}
 
.items-y-start {
    align-content: start;
}
 
.items-y-end {
    align-content: end;
}
 
.items-y-center {
    align-content: center;
}
 
.items-y-baseline {
    align-content: baseline;
}
 
.items-y-stretch {
    align-content: stretch;
}
 
.content-x-start {
    justify-content: start;
}
 
.content-x-end {
    justify-content: end;
}
 
.content-x-left {
    justify-content: left;
}
 
.content-x-right {
    justify-content: right;
}
 
.content-x-center {
    justify-content: center;
}
 
.content-x-stretch {
    justify-content: stretch;
}
 
.content-x-around {
    justify-content: space-around;
}
 
.content-x-evenly {
    justify-content: space-evenly;
}
 
.content-x-between {
    justify-content: space-between;
}
 
.content-y-start {
    align-content: start;
}
 
.content-y-end {
    align-content: end;
}
 
.content-y-center {
    align-content: center;
}
 
.content-y-stretch {
    align-content: stretch;
}
 
.content-y-baseline {
    align-content: baseline;
}
 
.content-y-around {
    align-content: space-around;
}
 
.content-y-evenly {
    align-content: space-evenly;
}
 
.content-y-between {
    align-content: space-between;
}
 
.self-x-start {
    justify-self: start;
}
 
.self-x-end {
    justify-self: end;
}
 
.self-x-left {
    justify-self: left;
}
 
.self-x-right {
    justify-self: right;
}
 
.self-x-center {
    justify-self: center;
}
 
.self-x-stretch {
    justify-self: stretch;
}
 
.self-y-start {
    align-self: start;
}
 
.self-y-end {
    align-self: end;
}
 
.self-y-center {
    align-self: center;
}
 
.self-y-baseline {
    align-self: baseline;
}
 
.self-y-stretch {
    align-self: stretch;
}

Use these generated classes in your html and enjoy tailwind grid placement 🥳

<div class="grid grid-cols-2 grid-rows-2 content-x-end items-x-center items-y-start">
    <span>1</span>
    <span>2</span>
    <span>3</span>
    <span class="self-y-center">4</span>
</div>

Readme

Keywords

none

Package Sidebar

Install

npm i tailwindcss-grid-placement

Weekly Downloads

3

Version

0.0.2

License

MIT

Unpacked Size

5.17 kB

Total Files

3

Last publish

Collaborators

  • subhero