TailwindCSS v3 / node v12+

Author: horuskol

CHANGELOG.md

@@ -1,5 +1,10 @@
 # Changelog
 
+## 2.0.0 - 2021-12-14
+ * Tested against TailwindCSS v3
+ * Updated minimum node requirements (v12)
+ * Updated documentation
+
 ## 1.5.0 - 2021-02-23
  * Fixed dependency for lodash in package.json.
  * Minor formatting improvements in README.

README.md

@@ -7,8 +7,6 @@
 
 A plugin to provide TailwindCSS utilities for named grid lines.
 
-The latest release of this plugin (version 1.3 onwards) will work with TailwindCSS versions 1 and 2.
-
 ## Installation
 
 ```
@@ -21,168 +19,7 @@ yarn add --dev @savvywombat/tailwindcss-grid-named-lines
 
 ## Usage
 
-Require the plugin into your `tailwindcss.config.js` file:
-
-```javascript
-// tailwindcss.config.js
-module.exports = {
-  plugins: [
-    require('@savvywombat/tailwindcss-grid-named-lines')
-  ]
-}
-```
-
-Now, when adding `gridTemplateColumns` and `gridTemplateRows`, you can name the lines and utilities will be generated:
-
-```javascript
-// tailwindcss.config.js
-module.exports = {
-  theme: {
-    gridTemplateColumns: {
-      'default-layout': '[left] 1fr [gutter-left] 2rem [content-left] calc(768px - 4rem) [content-right] 2rem [gutter-right] 1fr [right]',
-    },
-    gridTemplateRows: {
-      'default-layout': 
-        '[top header-top] ' +
-        '4rem ' +
-        '[header-bottom content-top] ' +
-        'minmax(1fr, max-content) ' +
-        '[content-bottom footer-top] ' +
-        'auto ' +
-        '[bottom]',
-    }
-  },
-  plugins: [
-    require('@savvywombat/tailwindcss-grid-named-lines')
-  ]
-}
-```
-
-This will generate the following utilities (in addition to the default):
-
-```
-col-start-left
-col-start-gutter-left
-col-start-content-left
-col-start-content-right
-col-start-gutter-right
-col-start-right
-
-col-end-left
-col-end-gutter-left
-col-end-content-left
-col-end-content-right
-col-end-gutter-right
-col-end-right
-
-row-start-top
-row-start-header-top
-row-start-header-bottom
-row-start-content-top
-row-start-content-bottom
-row-start-footer-top
-row-start-footer-bottom
-row-start-bottom
-
-row-end-top
-row-end-header-top
-row-end-header-bottom
-row-end-content-top
-row-end-content-bottom
-row-end-footer-top
-row-end-footer-bottom
-row-end-bottom
-```
-
-## Responsiveness
-
-These labels do not have any responsive behaviour by themselves. Responsive grid layouts can be defined using `gridTemplateColumns` and `gridTemplateRows`:
-
-```javascript
-// tailwindcss.config.js
-module.exports = {
-  theme: {
-    gridTemplateColumns: {
-      'default-layout': '[left] 1fr [gutter-left] 2rem [content-left] calc(768px - 4rem) [content-right] 2rem [gutter-right] 1fr [right]',
-      'small-layout': '[left gutter-left] 1rem [content-left] 1fr [content-right] 1rem [gutter-right right]',
-    },
-    gridTemplateRows: {
-      'default-layout': 
-        '[top header-top] ' +
-        '4rem ' +
-        '[header-bottom content-top] ' +
-        'minmax(1fr, max-content) ' +
-        '[content-bottom footer-top] ' +
-        'auto ' +
-        '[bottom]',
-    }
-  },
-  plugins: [
-    require('@savvywombat/tailwindcss-grid-named-lines')
-  ]
-}
-```
-## Repeated line names
-
-This plugin will generate numbered utilities when multiple lines share the same name in a `gridTemplateColumns` or `gridTemplateRows` definition:
-
-```javascript
-// tailwindcss.config.js
-module.exports = {
-  theme: {
-    gridTemplateColumns: {
-      'default-layout': '[column-start] 1fr [column-start] 1fr [column-start] 1fr [column-start] 1fr',
-    }
-  }
-}
-```
-
-This will generate the following utilities:
-
-```
-col-start-column-start-1
-col-start-column-start-2
-col-start-column-start-3
-col-start-column-start-4
-
-col-end-column-start-1
-col-end-column-start-2
-col-end-column-start-3
-col-end-column-start-4
-```
-
-Additionally, the plugin will create properly indexed utilities for line names defined inside `repeat()`:
-
-```javascript
-// tailwindcss.config.js
-module.exports = {
-  theme: {
-    gridTemplateColumns: {
-      'default-layout': 'repeat(3, [left] 1fr [right])',
-    }
-  }
-}
-```
-
-This will generate:
-
-```
-col-start-left-1
-col-start-left-2
-col-start-left-3
-
-col-start-right-1
-col-start-right-2
-col-start-right-3
-
-col-end-left-1
-col-end-left-2
-col-end-left-3
-
-col-end-right-1
-col-end-right-2
-col-end-right-3
-```
+See the documentation at https://savvywombat.com.au/tailwind-css/named-grid-lines/
 
 ## Changelog
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@savvywombat/tailwindcss-grid-named-lines",
-  "version": "1.5.0",
+  "version": "2.0.0",
   "description": "A plugin to provide TailwindCSS utilities for named grid lines.",
   "keywords": [
     "tailwind",
@@ -48,7 +48,7 @@
         "@babel/preset-env",
         {
           "targets": {
-            "node": "8.9.0"
+            "node": "12.22.0"
           }
         }
       ]