TailwindCSS - Nuxt typography connector (#32)

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@d0rich/nuxt-design-system",
-  "version": "0.7.3",
+  "version": "0.7.4",
   "main": "./nuxt.config.ts",
   "description": "🖼️ Design system for d0rich's projects based on Nuxt 3 and Tailwind CSS",
   "keywords": [

plugins/tailwind/nuxt-typography.js

@@ -0,0 +1,14 @@
+/* eslint-disable @typescript-eslint/no-var-requires */
+/** @type {import('tailwindcss/plugin')} */
+const plugin = require('tailwindcss/plugin')
+
+module.exports = plugin(function ({ addUtilities, theme }) {
+  addUtilities({
+    '.nuxt-typography-connector': {
+      '--typography-font-sans': theme('fontFamily.sans'),
+      '--typography-font-serif': theme('fontFamily.serif'),
+      '--typography-font-mono': theme('fontFamily.mono'),
+      '--typography-font-dialog': theme('fontFamily.dialog')
+    }
+  })
+})

plugins/tailwind/shadows.js

@@ -1,5 +1,7 @@
 /* eslint-disable @typescript-eslint/no-var-requires */
+/** @type {import('tailwindcss/plugin')} */
 const plugin = require('tailwindcss/plugin')
+/** @type {import('tailwindcss/colors')} */
 const colors = require('tailwindcss/colors')
 
 const X_OFFSET_VAR = '--tw-ss-x-offset'

tailwind.config.js

@@ -20,6 +20,7 @@ module.exports = {
   },
   plugins: [
     require('@tailwindcss/typography'),
-    require('./plugins/tailwind/shadows')
+    require('./plugins/tailwind/shadows'),
+    require('./plugins/tailwind/nuxt-typography')
   ]
 }