Merge pull request #65 from clean-commit/1.3.0

1.3.0 - tailwind 4 support added

Author: mrkaluzny

.prettierrc

@@ -17,6 +17,7 @@
   "tailwindFunctions": [
     "cn"
   ],
+  "tailwindStylesheet": "./src/styles/main.css",
   "plugins": [
     "@trivago/prettier-plugin-sort-imports",
     "prettier-plugin-tailwindcss"

CHANGELOG.md

@@ -1,5 +1,10 @@
 # Changelog
 
+## 1.3.0 - April 9, 2025
+
+- Support for Tailwind V4 added
+- Packages updates
+
 ## 1.2.1 - December 3, 2024
 
 - Gatsby bumped to 5.14.0

README.md

@@ -1,6 +1,6 @@
 ![Henlo Starter](https://repository-images.githubusercontent.com/270961687/4085d990-9083-451d-b39b-5316579adf09)
 
-# Gatsby Starter Henlo (v1.2.1)
+# Gatsby Starter Henlo (v1.3.0)
 
 [![Netlify Status](https://api.netlify.com/api/v1/badges/43532afb-3488-432b-8185-a745645a90d8/deploy-status)](https://app.netlify.com/sites/henlo/deploys)
 
@@ -14,13 +14,13 @@ It follows the [JAMstack architecture](https://jamstack.org) by using Git as a s
 
 ## Features
 
+- 💇‍♀️ TailwindCSS V4 support with PostCSS & Tailwind Merge
 - Support for Gatsby v5
 - 💪 Battle-tested starting point for small & large web projects
 - 📄 Form Builder that enables Admins to create multiple forms with ease & Netlify Forms integration.
 - 🌗 Darkmode support
 - 🗺 Sitemaps using `gatsby-plugin-sitemap`
 - 🔥 Perfect score on Lighthouse for SEO, Accessibility and Performance
-- 💇‍♀️ TailwindCSS support with PostCSS & Tailwind Merge
 - 🔌 Support for Gatsby API functions
 - 🎇 Crazy fast images with `gatsby-plugin-image`
 - 🕵️‍♂️ Complete SEO configuration with graphql fragment and reusable components based on Head API

package.json

@@ -1,15 +1,15 @@
 {
   "name": "gatsby-starter-henlo",
   "description": "Minimalistic starter for Gatsby v5, optimized for SEO & Performance.",
-  "version": "1.2.1",
+  "version": "1.3.0",
   "author": "Wojciech Kałużny <[email protected]>",
   "browserslist": [
     "defaults"
   ],
   "dependencies": {
-    "clsx": "^1.2.1",
-    "decap-cms-app": "^3.1.10",
-    "gatsby": "^5.9.1",
+    "clsx": "^2.1.1",
+    "decap-cms-app": "^3.6.2",
+    "gatsby": "^5.14.3",
     "gatsby-plugin-brotli": "^2.1.0",
     "gatsby-plugin-dark-mode": "^1.1.2",
     "gatsby-plugin-decap-cms": "^4.0.4",
@@ -37,7 +37,7 @@
     "react-helmet": "^6.1.0",
     "react-hook-form": "^7.41.3",
     "react-markdown": "^8.0.4",
-    "tailwind-merge": "^2.2.2"
+    "tailwind-merge": "^3.2.0"
   },
   "keywords": [
     "gatsby"
@@ -63,15 +63,16 @@
     "preload-fonts": "gatsby-preload-fonts"
   },
   "devDependencies": {
-    "@tailwindcss/forms": "^0.5.0",
-    "@tailwindcss/typography": "^0.5.2",
-    "@trivago/prettier-plugin-sort-imports": "^4.3.0",
-    "autoprefixer": "^10.4.19",
-    "postcss": "^8.4.38",
-    "postcss-nested": "^6.0.0",
-    "prettier": "^3.2.5",
-    "prettier-plugin-organize-imports": "^3.2.4",
-    "prettier-plugin-tailwindcss": "^0.5.14",
-    "tailwindcss": "^3.4.3"
+    "@tailwindcss/forms": "^0.5.10",
+    "@tailwindcss/postcss": "^4.1.3",
+    "@tailwindcss/typography": "^0.5.16",
+    "@trivago/prettier-plugin-sort-imports": "^5.2.2",
+    "postcss": "^8.5.3",
+    "postcss-nested": "^7.0.2",
+    "prettier": "^3.5.3",
+    "prettier-plugin-organize-imports": "^4.1.0",
+    "prettier-plugin-tailwindcss": "^0.6.11",
+    "tailwindcss": "^4.1.3",
+    "typescript": "^5.8.3"
   }
 }

postcss.config.js

@@ -1,8 +1,7 @@
 module.exports = {
   plugins: {
     'postcss-nested': {},
-    tailwindcss: {},
-    autoprefixer: {},
+    '@tailwindcss/postcss': {},
     ...(process.env.NODE_ENV === 'production' ? { cssnano: {} } : {}),
   },
 };

src/components/Form/partials/Checkbox.js

@@ -24,7 +24,7 @@ export default function Checkbox({
               value={true}
               aria-invalid={error ? 'true' : 'false'}
               required={data?.required}
-              className="border-black-300 relative cursor-pointer rounded-sm bg-zinc-100  focus:ring-0"
+              className="border-black-300 relative cursor-pointer rounded-xs bg-zinc-100  focus:ring-0"
             />
           </div>
           <div className="text-dark-500 text-sm font-normal">{data?.label}</div>

src/styles/main.css

@@ -1,3 +1,24 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import 'tailwindcss';
+
+@plugin '@tailwindcss/typography';
+@plugin '@tailwindcss/forms';
+
+@custom-variant dark (&:is(.dark *));
+
+/*
+  The default border color has changed to `currentcolor` in Tailwind CSS v4,
+  so we've added these compatibility styles to make sure everything still
+  looks the same as it did with Tailwind CSS v3.
+
+  If we ever want to remove these styles, we need to add an explicit border
+  color utility to any element that depends on these defaults.
+*/
+@layer base {
+  *,
+  ::after,
+  ::before,
+  ::backdrop,
+  ::file-selector-button {
+    border-color: var(--color-gray-200, currentcolor);
+  }
+}