[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"allCategoryPosts-css":3,"i-local-icon:calendar-days":64,"i-local-icon:tag":69,"i-local-icon:arrow-right":71},[4,13,20,27,34,41,48,55],{"title":5,"description":6,"id":7,"categories_slug":8,"date_published":11,"path":12},"Why Tailwind CSS suggests changing arbitrary values to standard classes","We should swap out arbitrary values like w-[100px] for standard utility classes like w-25 now that they are supported, to help us stick to a consistent design system and make the CSS much easier to maintain.","content\u002Fblog\u002F24.why-tailwind-suggests-standard-classes-vs-arbitrary-values.md",[9,10],"tailwind","css","2026-01-06","\u002Fblog\u002Fwhy-tailwind-suggests-standard-classes-vs-arbitrary-values",{"title":14,"description":15,"id":16,"categories_slug":17,"date_published":18,"path":19},"The CSS masonry syntax wars","As of November, 2025, the CSS Working Group announced a new CSS display property keyword called grid-lanes, which replaces the Firefox and Chromium\u002FWebkit approach to masonry layouts.","content\u002Fblog\u002F23.css-masonry-syntax-wars.md",[10],"2026-01-04","\u002Fblog\u002Fcss-masonry-syntax-wars",{"title":21,"description":22,"id":23,"categories_slug":24,"date_published":25,"path":26},"Creating a \"Masonry-lite\" Layout with Tailwind CSS Columns","While the 'true' Masonry layout is currently being drafted for the CSS Grid Level 3 specification, you can achieve a 'Masonry-lite' effect using CSS Columns, and if you are using Tailwind CSS, you can do it with just two different classes.","content\u002Fblog\u002F22.masonry-lite-layout-tailwind-css.md",[9,10],"2026-01-02","\u002Fblog\u002Fmasonry-lite-layout-tailwind-css",{"title":28,"description":29,"id":30,"categories_slug":31,"date_published":32,"path":33},"Handling hover states on mobile and touch devices in Tailwind CSS 4","Tailwind CSS v4 has been updated so that the hover variant only applies when the primary input device supports hover.  Options on how to solve the issues this presents.","content\u002Fblog\u002F20.tailwind-css-4-hover-on-touch-device.md",[10,9],"2025-07-09","\u002Fblog\u002Ftailwind-css-4-hover-on-touch-device",{"title":35,"description":36,"id":37,"categories_slug":38,"date_published":39,"path":40},"Tailwind CSS 4 - Overriding or replacing screen sizes (breakpoints)","Learn how to override and customize screen sizes (breakpoints) in Tailwind CSS 4's new CSS-first configuration system. Includes migration tips, practical examples, and troubleshooting guide.","content\u002Fblog\u002F15.tailwind-css-4-breakpoint-override.md",[10,9],"2025-05-25","\u002Fblog\u002Ftailwind-css-4-breakpoint-override",{"title":42,"description":43,"id":44,"categories_slug":45,"date_published":46,"path":47},"Tailwind CSS - Using subgrid to align child content","As of Tailwind CSS 3.4, CSS subgrids are now available. In this article, we will look at how we can use the new subgrid option to fix a very common layout alignment issue.","content\u002Fblog\u002F13.tailwind-css-subgrid-align-content.md",[10,9],"2024-06-08","\u002Fblog\u002Ftailwind-css-subgrid-align-content",{"title":49,"description":50,"id":51,"categories_slug":52,"date_published":53,"path":54},"Tailwind CSS - How to make a grid with different width columns","Explore how to create a two-column grid as an example using Tailwind CSS, where the first column takes up 20% of the width, and the second column occupies the remaining 80% using 3 different methods to accomplish this.","content\u002Fblog\u002F11.tailwind-css-make-grid-different-width-columns.md",[10,9],"2024-01-04","\u002Fblog\u002Ftailwind-css-make-grid-different-width-columns",{"title":56,"description":57,"id":58,"categories_slug":59,"date_published":62,"path":63},"Owl Carousel CLS (Cumulative Layout Shift) fix","In this article, we will look at CLS (Cumulative Layout Shift) and how sliders\u002Fcarousels such as Owl Carousel negatively impact CLS scores and provide a fix.","content\u002Fblog\u002F2.owl-carousel-cls-fix.md",[10,60,61],"development","wordpress","2021-12-19","\u002Fblog\u002Fowl-carousel-cls-fix",{"left":65,"top":65,"width":66,"height":66,"rotate":65,"vFlip":67,"hFlip":67,"body":68},0,24,false,"\u003Cpath\n    fill=\"none\"\n    stroke=\"currentColor\"\n    stroke-linecap=\"round\"\n    stroke-linejoin=\"round\"\n    stroke-width=\"1.5\"\n    d=\"M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 0 1 2.25-2.25h13.5A2.25 2.25 0 0 1 21 7.5v11.25m-18 0A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75m-18 0v-7.5A2.25 2.25 0 0 1 5.25 9h13.5A2.25 2.25 0 0 1 21 11.25v7.5m-9-6h.008v.008H12zM12 15h.008v.008H12zm0 2.25h.008v.008H12zM9.75 15h.008v.008H9.75zm0 2.25h.008v.008H9.75zM7.5 15h.008v.008H7.5zm0 2.25h.008v.008H7.5zm6.75-4.5h.008v.008h-.008zm0 2.25h.008v.008h-.008zm0 2.25h.008v.008h-.008zm2.25-4.5h.008v.008H16.5zm0 2.25h.008v.008H16.5z\" \u002F>",{"left":65,"top":65,"width":66,"height":66,"rotate":65,"vFlip":67,"hFlip":67,"body":70},"\u003Cg\n    fill=\"none\"\n    stroke=\"currentColor\"\n    stroke-linecap=\"round\"\n    stroke-linejoin=\"round\"\n    stroke-width=\"1.5\">\n    \u003Cpath\n      d=\"M9.568 3H5.25A2.25 2.25 0 0 0 3 5.25v4.318c0 .597.237 1.17.659 1.591l9.581 9.581c.699.699 1.78.872 2.607.33a18.1 18.1 0 0 0 5.224-5.223c.54-.827.368-1.908-.33-2.607l-9.583-9.58A2.25 2.25 0 0 0 9.568 3\" \u002F>\n    \u003Cpath d=\"M6 6h.008v.008H6z\" \u002F>\n  \u003C\u002Fg>",{"left":65,"top":65,"width":66,"height":66,"rotate":65,"vFlip":67,"hFlip":67,"body":72},"\u003Cg fill=\"none\" stroke-width=\"2.0\" stroke=\"currentColor\">\u003Cpath\n    stroke-linecap=\"round\"\n    stroke-linejoin=\"round\"\n    d=\"M13.5 4.5 21 12m0 0-7.5 7.5M21 12H3\">\u003C\u002Fpath>\u003C\u002Fg>"]