You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
{{ message }}
This repository was archived by the owner on Sep 25, 2020. It is now read-only.
Copy file name to clipboardExpand all lines: README.md
+45-45Lines changed: 45 additions & 45 deletions
Original file line number
Diff line number
Diff line change
@@ -45,51 +45,6 @@ module.exports = {
45
45
46
46
This is just about the simplest type of plugin you could make.
47
47
48
-
## CSS Grid Utilities
49
-
50
-
[View the source](https://github.com/tailwindcss/plugin-examples/blob/master/plugins/css-grid/index.js)
51
-
52
-
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).
-`grids`, for specifying all of the grid sizes you'd like to generate
59
-
-`gaps`, for specifying the gap sizes you'd like to generate
60
-
-`variants`, for specifying which variants to generate
61
-
62
-
```js
63
-
module.exports= {
64
-
// ...
65
-
66
-
plugins: [
67
-
// ...
68
-
require('./plugins/css-grid')({
69
-
grids: [2, 3, 5, 6, 8, 10, 12],
70
-
gaps: {
71
-
0:'0',
72
-
4:'1rem',
73
-
8:'2rem',
74
-
},
75
-
variants: ['responsive'],
76
-
}),
77
-
],
78
-
}
79
-
```
80
-
81
-
With zero configuration, it will generate grids from 1 to 12 columns in size, no gap sizes, and `responsive` variants for each new utility.
82
-
83
-
The plugin generates the following sets of classes:
84
-
85
-
-`.grid`, for setting `display: grid` on an element
86
-
-`.grid-columns-{size}`, for specifying the number of columns in the grid
87
-
-`.grid-gap-{size}`, for specifying the size of the gap between columns/rows
88
-
-`.col-span-{columns}`, for specifying how wide a column should be
89
-
-`.col-start-{line}` and `.col-end-{line}`, for specifying a column's start and end points explicitly (useful for reordering columns or leaving gaps)
90
-
91
-
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.
92
-
93
48
## Simple Buttons
94
49
95
50
[View the source](https://github.com/tailwindcss/plugin-examples/blob/master/plugins/simple-buttons/index.js)
@@ -184,3 +139,48 @@ module.exports = {
184
139
```
185
140
186
141
Again, the sky is the limit in terms of the API a plugin exposes for configuration. You can do anything you want!
142
+
143
+
## CSS Grid Utilities
144
+
145
+
[View the source](https://github.com/tailwindcss/plugin-examples/blob/master/plugins/css-grid/index.js)
146
+
147
+
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).
-`grids`, for specifying all of the grid sizes you'd like to generate
154
+
-`gaps`, for specifying the gap sizes you'd like to generate
155
+
-`variants`, for specifying which variants to generate
156
+
157
+
```js
158
+
module.exports= {
159
+
// ...
160
+
161
+
plugins: [
162
+
// ...
163
+
require('./plugins/css-grid')({
164
+
grids: [2, 3, 5, 6, 8, 10, 12],
165
+
gaps: {
166
+
0:'0',
167
+
4:'1rem',
168
+
8:'2rem',
169
+
},
170
+
variants: ['responsive'],
171
+
}),
172
+
],
173
+
}
174
+
```
175
+
176
+
With zero configuration, it will generate grids from 1 to 12 columns in size, no gap sizes, and `responsive` variants for each new utility.
177
+
178
+
The plugin generates the following sets of classes:
179
+
180
+
-`.grid`, for setting `display: grid` on an element
181
+
-`.grid-columns-{size}`, for specifying the number of columns in the grid
182
+
-`.grid-gap-{size}`, for specifying the size of the gap between columns/rows
183
+
-`.col-span-{columns}`, for specifying how wide a column should be
184
+
-`.col-start-{line}` and `.col-end-{line}`, for specifying a column's start and end points explicitly (useful for reordering columns or leaving gaps)
185
+
186
+
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.
0 commit comments