Initial Commit

Author: chrisrowe

.gitignore

@@ -0,0 +1,2 @@
+/node_modules
+yarn-error.log

README.md

@@ -0,0 +1,46 @@
+# CSS Grid Tailwind Plugin
+
+Isolated from [https://github.com/tailwindcss/plugin-examples](https://github.com/tailwindcss/plugin-examples)
+
+[View demo](https://tailwindcss.github.io/plugin-examples/#css-grid) · [View source](https://github.com/tailwindcss/plugin-examples/blob/master/plugins/css-grid/index.js)
+
+In `plugins/css-grid/index.js` you'll find an example of a plugin that adds new utilities for using [CSS Grid Layout](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout).
+
+![](https://user-images.githubusercontent.com/4323180/37525015-fb5c78f2-2901-11e8-97be-18c66d12bf84.png)
+
+It exposes three 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
+- `variants`, for specifying which variants to generate
+
+```js
+module.exports = {
+  // ...
+
+  plugins: [
+    // ...
+    require('./plugins/css-grid')({
+      grids: [2, 3, 5, 6, 8, 10, 12],
+      gaps: {
+        0: '0',
+        4: '1rem',
+        8: '2rem',
+      },
+      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.
+
+The plugin generates the following sets of classes:
+
+- `.grid`, for setting `display: grid` on an element
+- `.grid-columns-{size}`, for specifying the number of columns in the grid
+- `.grid-gap-{size}`, for specifying the size of the gap between columns/rows
+- `.col-span-{columns}`, for specifying how wide a column should be
+- `.col-start-{line}` and `.col-end-{line}`, for specifying a column's start and end points explicitly (useful for reordering columns or leaving gaps)
+
+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 column-only float or Flexbox grid.

index.js

@@ -0,0 +1,31 @@
+const _ = require('lodash')
+
+module.exports = function ({ grids = _.range(1, 12), gaps = {}, variants = ['responsive']}) {
+  return function ({ e, addUtilities }) {
+    addUtilities([
+      { '.grid': { display: 'grid' } },
+      { '.grid-dense': { gridAutoFlow: 'dense' } },
+      ..._.map(gaps, (size, name) => ({
+        [`.grid-gap-${e(name)}`]: { gridGap: size },
+      })),
+      ...grids.map(columns => ({
+        [`.grid-columns-${columns}`]: {
+          gridTemplateColumns: `repeat(${columns}, 1fr)`,
+        }
+      })),
+      ..._.range(1, _.max(grids) + 1).map(span => ({
+        [`.col-span-${span}`]: {
+          gridColumnStart: `span ${span}`,
+        }
+      })),
+      ..._.range(1, _.max(grids) + 2).map(line => ({
+        [`.col-start-${line}`]: {
+          gridColumnStart: `${line}`,
+        },
+        [`.col-end-${line}`]: {
+          gridColumnEnd: `${line}`,
+        },
+      })),
+    ], variants)
+  }
+}

package.json

@@ -0,0 +1,28 @@
+{
+  "name": "tailwindcss-grid",
+  "version": "1.0.0",
+  "description": "CSS grid plugin for tailwindcss framework",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/chrisrowe/tailwindcss-grid.git"
+  },
+  "keywords": [
+    "tailwind",
+    "tailwindcss",
+    "plugin",
+    "tailwindcss-plugin"
+  ],
+  "author": "chrisrowe",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/chrisrowe/tailwindcss-grid/issues"
+  },
+  "homepage": "https://github.com/chrisrowe/tailwindcss-grid#readme",
+  "devDependencies": {
+    "lodash": "^4.17.5"
+  }
+}