Update to support tailwindcss v4

Author: xWayfinder

README.md

@@ -21,9 +21,31 @@ layouts-css makes it a breeze to layout HTML with it's easy-to-understand CSS la
 
 <hr/>
 
-## Getting Started
+## Getting Started using tailwind V4
+There are two approaches
 
-ℹ️ This guide assume you have Tailwind already setup and configured.
+#### Options 1 - (Recommended) Copy paste into your global.css
+Tailwind v4 introduces css based config meaning code can be shared without another npm package to download
+
+* Copy everything in [layouts.css](src/layouts.css)
+* Paste into your `global.css`
+
+💥 Boom - you're done and with one less package
+
+#### Options 2 - Link in your node modules
+
+`npm i -D @layouts-css/tailwindcss`
+
+In `global.css` add the
+```
+@import '@layouts-css/tailwindcss-layouts/src/layouts.css';
+```
+
+Seriously though don't do this...
+
+## Getting Started using tailwind V3
+
+ℹ️ This guide assume you have Tailwind v3 already setup and configure.
 
 #### Install package
 
@@ -1096,15 +1118,6 @@ Bonus
 
 `h-max-{number}` the element can have a max height set
 
-<br/>
-
-### 🔲 Size
-
-Shorthand helper class for setting the same width and height property.
-
-`s-hug` the element hugs the width and height of it's content.
-
-`s-fill` the element fills the remaining width and height of it's parent element.
 
 <br/>
 
@@ -1139,15 +1152,6 @@ module.exports = {
 - Elements without a layout class will respect default html block & inline element behavior.
 - `body` & `html` both have `width` and `height` set to `100%`
 
-<br/>
-
-## Demo
-
-If you are interested in comparing layouts with and without check out the following Tailwind CSS play links:
-
-- ❌ [Without layouts-css](https://) **🚧 Coming Soon**
-
-- ✅ [With layouts-css](https://) **🚧 Coming Soon**
 
 <br>
 
@@ -1163,7 +1167,6 @@ A: Hopefully not for long
 _**🚧 Coming soon**_
 
 - [@layouts-css/plain-css](https://github.com/layouts-css/plain-css)
-- [@layouts-css/vanilla-extract](https://github.com/layouts-css/vanilla-extract) (CSS in JS/TS)
 
 <br>
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@layouts-css/tailwindcss-plugin",
-  "version": "1.1.2",
+  "version": "2.0.0",
   "main": "src/index.js",
   "types": "src/index.d.ts",
   "repository": "https://github.com/layouts-css/tailwindcss-plugin",
@@ -10,8 +10,7 @@
   },
   "devDependencies": {
     "postcss": "^8.5.2",
-    "prettier": "^3.5.1",
-    "tailwindcss": "^3.4.17"
+    "prettier": "^3.5.1"
   },
   "peerDependencies": {
     "tailwindcss": ">=3.0.0 || insiders"

src/index.js

@@ -109,50 +109,7 @@ const layoutCss = withOptions((options = {}) => {
           height: '100%',
         },
 
-      '* > .s-fill': {
-        height: '100%',
-        width: ['100%', '-moz-available', '-webkit-fill-available', 'stretch'],
-      },
-
-      '.layout-packed-tl-x > .s-fill, .layout-packed-tc-x > .s-fill, .layout-packed-tr-x > .s-fill, .layout-packed-ml-x > .s-fill, .layout-packed-mc-x > .s-fill, .layout-packed-mr-x > .s-fill, .layout-packed-bl-x > .s-fill, .layout-packed-bc-x > .s-fill, .layout-packed-br-x > .s-fill, .layout-spaced-t > .s-fill, .layout-spaced-m > .s-fill, .layout-spaced-b > .s-fill':
-        {
-          alignSelf: 'stretch',
-          flexGrow: '0',
-          width: [
-            '100%',
-            '-moz-available',
-            '-webkit-fill-available',
-            'stretch',
-          ],
-        },
-
-      '.layout-packed-tl-y > .s-fill, .layout-packed-tc-y > .s-fill, .layout-packed-tr-y > .s-fill, .layout-packed-ml-y > .s-fill, .layout-packed-mc-y > .s-fill, .layout-packed-mr-y > .s-fill, .layout-packed-bl-y > .s-fill, .layout-packed-bc-y > .s-fill, .layout-packed-br-y > .s-fill, .layout-spaced-l > .s-fill, .layout-spaced-c > .s-fill, .layout-spaced-r > .s-fill':
-        {
-          alignSelf: 'auto',
-          flexGrow: '1',
-          width: [
-            '100%',
-            '-moz-available',
-            '-webkit-fill-available',
-            'stretch',
-          ],
-        },
-
-      '.layout-grid-tl > .s-fill, .layout-grid-tc > .s-fill, .layout-grid-tr > .s-fill, .layout-grid-ml > .s-fill, .layout-grid-mc > .s-fill, .layout-grid-mr > .s-fill, .layout-grid-bl > .s-fill, .layout-grid-bc > .s-fill, .layout-grid-br > .s-fill':
-        {
-          height: '100%',
-          width: [
-            '100%',
-            '-moz-available',
-            '-webkit-fill-available',
-            'stretch',
-          ],
-        },
 
-      '.s-initial': {
-        height: 'initial',
-        width: 'initial',
-      },
       '.w-initial': {
         width: 'initial',
       },