Implemented Nuxt Tailwind Module

README.md

@@ -114,6 +114,7 @@ Check out the [deployment documentation](https://nuxt.com/docs/getting-started/d
 - [VueUse](https://vueuse.org/) - collection of essential Vue composition utilities.
 - 🍍 [Pinia](https://pinia.vuejs.org/ssr/nuxt.html) stores for global state management via the `@pinia/nuxt module`. Its light-weight, type-safe, extensible, modular with vue-devtools support.
 - [VeeValidate](https://vee-validate.logaretm.com/v4/integrations/nuxt/) takes care of value tracking, validation, errors, submissions and more.
+- [Nuxt Tailwind CSS](https://tailwindcss.nuxtjs.org/) - The Tailwind CSS module for Nuxt lets you set up Tailwind CSS in your Nuxt application in seconds, with many goodies 🍬.
 - [Nuxt Image](https://image.nuxt.com/) - Plug-and-play image optimization for Nuxt apps.
 - [Nuxt SEO](https://nuxtseo.com/) - Amazing collection of hand-crafted Nuxt Modules for all SEO needs with a unified site config. Includes `nuxt-site-config`, `nuxt-simple-robots`, `nuxt-simple-sitemap`, `nuxt-og-image`, `nuxt-link-checker`, `nuxt-seo-experiments`, `nuxt-schema-org`.
   - OG images and nuxtseo features can be previewed with nuxt-devtools during development. OG images can also be viewed using URL in this form - `/__og-image__/image/<path>/og.<extension>`

app/content/quick-start.md

@@ -114,6 +114,7 @@ Check out the [deployment documentation](https://nuxt.com/docs/getting-started/d
 - [VueUse](https://vueuse.org/) - collection of essential Vue composition utilities.
 - 🍍 [Pinia](https://pinia.vuejs.org/ssr/nuxt.html) stores for global state management via the `@pinia/nuxt module`. Its light-weight, type-safe, extensible, modular with vue-devtools support.
 - [VeeValidate](https://vee-validate.logaretm.com/v4/integrations/nuxt/) takes care of value tracking, validation, errors, submissions and more.
+- [Nuxt Tailwind CSS](https://tailwindcss.nuxtjs.org/) - The Tailwind CSS module for Nuxt lets you set up Tailwind CSS in your Nuxt application in seconds, with many goodies 🍬.
 - [Nuxt Image](https://image.nuxt.com/) - Plug-and-play image optimization for Nuxt apps.
 - [Nuxt SEO](https://nuxtseo.com/) - Amazing collection of hand-crafted Nuxt Modules for all SEO needs with a unified site config. Includes `nuxt-site-config`, `nuxt-simple-robots`, `nuxt-simple-sitemap`, `nuxt-og-image`, `nuxt-link-checker`, `nuxt-seo-experiments`, `nuxt-schema-org`.
   - OG images and nuxtseo features can be previewed with nuxt-devtools during development. OG images can also be viewed using URL in this form - `/__og-image__/image/<path>/og.<extension>`

nuxt.config.ts

@@ -68,8 +68,10 @@ export default defineNuxtConfig({
     // '@nuxtjs/fontaine', // blocked by https://github.com/nuxt-modules/fontaine/issues/342
     '@nuxtjs/critters',
     // '@nuxt/icon', // Enable once nuxt-icon is removed
-    'nuxt-icon', // To be replaced with @nuxt-icon (above), once NuxtSEO drops using this.
+    // To be replaced with @nuxt-icon (above), once NuxtSEO drops using this.
+    'nuxt-icon',
     '@nuxt/eslint',
+    '@nuxtjs/tailwindcss',
   ],
 
   // https://dev.to/jacobandrewsky/improving-performance-of-nuxt-with-fontaine-5dim
@@ -95,17 +97,11 @@ export default defineNuxtConfig({
   //   },
   // },
 
-  css: [
-    '@/assets/css/tailwind.css',
-    'lite-youtube-embed/src/lite-yt-embed.css',
-  ],
+  css: ['lite-youtube-embed/src/lite-yt-embed.css'],
 
-  postcss: {
-    plugins: {
-      'tailwindcss/nesting': {},
-      tailwindcss: {},
-      autoprefixer: {},
-    },
+  tailwindcss: {
+    configPath: 'tailwind.config.ts',
+    cssPath: '@/assets/css/tailwind.css',
   },
 
   vite: {