@obosbbl/grunnmuren-tailwind 0.7.3 → 0.8.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@obosbbl/grunnmuren-tailwind",
-  "version": "0.7.3",
+  "version": "0.8.1",
   "description": "Grunnmuren Tailwind preset",
   "license": "MIT",
   "type": "commonjs",
@@ -19,10 +19,10 @@
     "@tailwindcss/typography": "0.5.7"
   },
   "devDependencies": {
-    "tailwindcss": "3.1.8",
+    "tailwindcss": "3.2.1",
     "postcss": "8.4.18"
   },
   "peerDependencies": {
-    "tailwindcss": "^3"
+    "tailwindcss": "^3.2"
   }
 }

package/tailwind-base.cjs

@@ -333,6 +333,9 @@ module.exports = (userOptions) => {
         addUtilities({
           // imitates a bold font, but doesn't cause layout due to element width change like with font-weight
           // Note that this CSS isn't standardized, but it works in Fx, Chrome, Safari and Edge
+          /**
+           * @deprecated use font-bold instead
+           */
           '.fake-font-bold': {
             '-webkit-text-stroke': '1px',
           },
@@ -375,7 +378,12 @@ module.exports = (userOptions) => {
           prose: '696px',
         },
         screens: {
-          // replicate the smaller than breakpoint from Windi. Even though we are mobile first, it is really nice with an escape hatch sometimes
+          'max-md': { max: '767.9px' },
+          /**
+           * @deprecated Tailwind 3.2 has built in support for max-width breakpoints, but it only works
+           * with a "simple screens" configuration... We add `max-md` manually here, allow everyone to migrate off
+           * `<md`, then we can remove `screens` enitrely from this config.
+           */
           '<md': { max: '767.9px' },
         },
         spacing: {
@@ -428,6 +436,9 @@ module.exports = (userOptions) => {
             DEFAULT: '#fff5d2',
           },
         },
+        borderColor: ({ theme }) => ({
+          DEFAULT: theme('colors.gray.light', 'currentColor'),
+        }),
         fontFamily: {
           sans: [fontFamily, 'sans-serif'],
         },