├── .gitignore ├── README.md ├── index.js └── package.json /.gitignore: -------------------------------------------------------------------------------- 1 | /node_modules 2 | yarn-error.log 3 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # CSS Grid Tailwind Plugin 2 | 3 | ## Configuration options 4 | 5 | - `grids` for specifying all of the grid sizes you'd like to generate 6 | - `gaps` for specifying the gap sizes you'd like to generate 7 | - `autoMinWidths` for specifying min width to columns using auto-fit and minmax 8 | - `variants` for specifying which variants to generate 9 | 10 | ```js 11 | module.exports = { 12 | // ... 13 | 14 | plugins: [ 15 | // ... 16 | require('tailwindcss-grid')({ 17 | grids: [2, 3, 5, 6, 8, 10, 12], 18 | gaps: { 19 | 0: '0', 20 | 4: '1rem', 21 | 8: '2rem', 22 | '4-x': '1rem', 23 | '4-y': '1rem', 24 | }, 25 | autoMinWidths: { 26 | '16': '4rem', 27 | '24': '6rem', 28 | '300px': '300px', 29 | }, 30 | variants: ['responsive'], 31 | }), 32 | ], 33 | } 34 | ``` 35 | 36 | With zero configuration, it will generate grids from 1 to 12 columns in size, no gap sizes, and `responsive` variants for each new utility. 37 | 38 | ## Generated classes 39 | 40 | The plugin generates the following sets of classes: 41 | 42 | - `.grid` for setting `display: grid` on an element 43 | - `.grid-columns-{size}` for specifying the number of columns in the grid 44 | - `.col-span-{columns}` for specifying how many columns a cell should span 45 | - `.grid-gap-{size}` for specifying the size of the gap between columns/rows, if the name ends with -x or -y `grid-[column/row]-gap` will be used 46 | - `.grid-automin-{size}` for applying the minimum width of the columns using auto-fit and minmax (the max is 1fr) 47 | - `.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) 48 | - `.row-span-{columns}` for specifying how many rows a cell should span 49 | - `.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) 50 | - `.grid-dense` applies `grid-auto-flow: dense` 51 | 52 | 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. 53 | 54 | --- 55 | 56 | ### Credit 57 | 58 | This repo was originally isolated from [https://github.com/tailwindcss/plugin-examples](https://github.com/tailwindcss/plugin-examples) to publish to npm. 59 | 60 | Credit and thanks to [@adamwathan](https://github.com/adamwathan) - [view original demo](https://tailwindcss.github.io/plugin-examples/#css-grid) -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | const _ = require('lodash') 2 | 3 | module.exports = function ({ 4 | grids = _.range(1, 13), 5 | gaps = {}, 6 | autoMinWidths = {}, 7 | variants = ['responsive'], 8 | }) { 9 | return function ({ 10 | e, 11 | addUtilities 12 | }) { 13 | addUtilities( 14 | [{ 15 | '.grid': { 16 | display: 'grid', 17 | }, 18 | }, 19 | { 20 | '.grid-dense': { 21 | gridAutoFlow: 'dense', 22 | }, 23 | }, 24 | ..._.map(gaps, (size, name) => { 25 | const gridGap = name.endsWith('-y') ? 26 | 'gridRowGap' : 27 | name.endsWith('-x') ? 28 | 'gridColumnGap' : 29 | 'gridGap' 30 | 31 | return { 32 | [`.${e(`grid-gap-${name}`)}`]: { 33 | [gridGap]: size, 34 | }, 35 | } 36 | }), 37 | ...grids.map(columns => ({ 38 | [`.grid-columns-${columns}`]: { 39 | gridTemplateColumns: `repeat(${columns}, 1fr)`, 40 | }, 41 | })), 42 | ..._.map(autoMinWidths, (size, name) => ({ 43 | [`.${e(`grid-automin-${name}`)}`]: { 44 | gridTemplateColumns: `repeat(auto-fit, minmax(${size}, 1fr))`, 45 | }, 46 | })), 47 | ..._.range(1, _.max(grids) + 1).map(span => ({ 48 | [`.col-span-${span}`]: { 49 | gridColumnStart: `span ${span}`, 50 | }, 51 | })), 52 | ..._.range(1, _.max(grids) + 2).map(line => ({ 53 | [`.col-start-${line}`]: { 54 | gridColumnStart: `${line}`, 55 | }, 56 | [`.col-end-${line}`]: { 57 | gridColumnEnd: `${line}`, 58 | }, 59 | })), 60 | ..._.range(1, _.max(grids) + 1).map(span => ({ 61 | [`.row-span-${span}`]: { 62 | gridRowStart: `span ${span}`, 63 | }, 64 | })), 65 | ..._.range(1, _.max(grids) + 2).map(line => ({ 66 | [`.row-start-${line}`]: { 67 | gridRowStart: `${line}`, 68 | }, 69 | [`.row-end-${line}`]: { 70 | gridRowEnd: `${line}`, 71 | }, 72 | })), 73 | ], 74 | variants, 75 | ) 76 | } 77 | } -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "tailwindcss-grid", 3 | "version": "1.2.1", 4 | "description": "CSS grid plugin for tailwindcss framework", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "repository": { 10 | "type": "git", 11 | "url": "git+https://github.com/chrisrowe/tailwindcss-grid.git" 12 | }, 13 | "keywords": [ 14 | "tailwind", 15 | "tailwindcss", 16 | "plugin", 17 | "tailwindcss-plugin" 18 | ], 19 | "author": "chrisrowe", 20 | "license": "MIT", 21 | "bugs": { 22 | "url": "https://github.com/chrisrowe/tailwindcss-grid/issues" 23 | }, 24 | "homepage": "https://github.com/chrisrowe/tailwindcss-grid#readme", 25 | "devDependencies": { 26 | "lodash": "^4.17.5" 27 | } 28 | } --------------------------------------------------------------------------------