chrisrowe / Tailwindcss Grid
Brings grid support to Tailwind CSS
Stars: ✭ 116
Programming Languages
javascript
184084 projects - #8 most used programming language
Labels
Projects that are alternatives of or similar to Tailwindcss Grid
Explorer
A Blockchain Explorer for ARK using Vue.js and Tailwind CSS.
Stars: ✭ 102 (-12.07%)
Mutual labels: tailwindcss
Windicss
Next generation utility-first CSS framework.
Stars: ✭ 1,355 (+1068.1%)
Mutual labels: tailwindcss
Jet
It‘s (j)ust (e)leventy and (t)ailwind … OK, and a few other things; it‘s still *really* small though.
Stars: ✭ 111 (-4.31%)
Mutual labels: tailwindcss
Spacebook
💥 Create fast and simple documentation to explain almost anything. Uses Eleventy, Tailwind 2.0, and Alpine JS with an optional Netlify CMS.
Stars: ✭ 104 (-10.34%)
Mutual labels: tailwindcss
Banking System
A banking System Created Using Django Python Web Framework
Stars: ✭ 105 (-9.48%)
Mutual labels: tailwindcss
Saas Vuejs Tailwindcss
VueJS + TailwindCSS frontend for SaaS apps.
Stars: ✭ 107 (-7.76%)
Mutual labels: tailwindcss
Leerob.io
✨ My portfolio built with Next.js, MDX, Tailwind CSS, and Vercel.
Stars: ✭ 1,369 (+1080.17%)
Mutual labels: tailwindcss
Vue Notus
Vue Notus: Free Tailwind CSS UI Kit and Admin
Stars: ✭ 108 (-6.9%)
Mutual labels: tailwindcss
Pokemon63
「みんなの63 - スクリーンショットから自動解析できるポケモンの選出投稿サイト」のソースコード
Stars: ✭ 107 (-7.76%)
Mutual labels: tailwindcss
Sapper Firebase Typescript Graphql Tailwindcss Actions Template
A template that includes Sapper for Svelte, Firebase functions and hosting, TypeScript and TypeGraphQL, Tailwind CSS, ESLint, and automatic building and deployment with GitHub Actions
Stars: ✭ 111 (-4.31%)
Mutual labels: tailwindcss
Tailwindcss Transforms
[DEPRECATED] Tailwind CSS plugin to generate transform utilities
Stars: ✭ 106 (-8.62%)
Mutual labels: tailwindcss
Nextjs Wordpress Starter
WebDevStudios Next.js WordPress Starter
Stars: ✭ 104 (-10.34%)
Mutual labels: tailwindcss
Jira Clone Angular
A simplified Jira clone built with Angular, ng-zorro and Akita
Stars: ✭ 1,396 (+1103.45%)
Mutual labels: tailwindcss
Goodwork
Self hosted project management and collaboration tool powered by TALL stack
Stars: ✭ 1,730 (+1391.38%)
Mutual labels: tailwindcss
Jackpine
WordPress starter theme with Timber, Tailwind, and Alpine.js.
Stars: ✭ 101 (-12.93%)
Mutual labels: tailwindcss
Tailwindcss
A utility-first CSS framework for rapid UI development.
Stars: ✭ 50,879 (+43761.21%)
Mutual labels: tailwindcss
Vue Telescope Analyzer
Detect Vue technologies running on a website ✨
Stars: ✭ 117 (+0.86%)
Mutual labels: tailwindcss
React Native Design Utility
Utility for building design system in react-native. Idea from TailwindCSS
Stars: ✭ 116 (+0%)
Mutual labels: tailwindcss
Instagram
Subscribe to my YouTube channel: https://bit.ly/CognitiveSurge - Building Instagram Using React
Stars: ✭ 109 (-6.03%)
Mutual labels: tailwindcss
CSS Grid Tailwind Plugin
Configuration options
-
grids
for specifying all of the grid sizes you'd like to generate -
gaps
for specifying the gap sizes you'd like to generate -
autoMinWidths
for specifying min width to columns using auto-fit and minmax -
variants
for specifying which variants to generate
module.exports = {
// ...
plugins: [
// ...
require('tailwindcss-grid')({
grids: [2, 3, 5, 6, 8, 10, 12],
gaps: {
0: '0',
4: '1rem',
8: '2rem',
'4-x': '1rem',
'4-y': '1rem',
},
autoMinWidths: {
'16': '4rem',
'24': '6rem',
'300px': '300px',
},
variants: ['responsive'],
}),
],
}
With zero configuration, it will generate grids from 1 to 12 columns in size, no gap sizes, and responsive
variants for each new utility.
Generated classes
The plugin generates the following sets of classes:
-
.grid
for settingdisplay: grid
on an element -
.grid-columns-{size}
for specifying the number of columns in the grid -
.col-span-{columns}
for specifying how many columns a cell should span -
.grid-gap-{size}
for specifying the size of the gap between columns/rows, if the name ends with -x or -ygrid-[column/row]-gap
will be used -
.grid-automin-{size}
for applying the minimum width of the columns using auto-fit and minmax (the max is 1fr) -
.col-start-{line}
and.col-end-{line}
for specifying a cell's start and end grid lines explicitly (useful for reordering cells or leaving gaps) -
.row-span-{columns}
for specifying how many rows a cell should span -
.row-start-{line}
and.row-end-{line}
, for specifying a cell's start and end grid lines explicitly (useful for reordering cells or leaving gaps) -
.grid-dense
appliesgrid-auto-flow: dense
It's not really practical to expose all of the power of CSS Grid through utilities, but this plugin is a good example of using CSS Grid to replace a cell-only float or Flexbox grid.
Credit
This repo was originally isolated from https://github.com/tailwindcss/plugin-examples to publish to npm.
Credit and thanks to @adamwathan - view original demo
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].