标签: unocss

通过Nuxt3 Starter首次尝试 Nuxt3

我想知道如何在 Nuxt3 Starter 中手动使用 tailwindcss 。

（不是通过@nuxtjs/tailwindcss，因为它适用于 Nuxt2，不适用于 Nuxt3。）

我创建了一个空白的 Nuxt3 项目

npx degit "nuxt/starter#v3" my-nuxt3-project

然后，我手动安装了 tailwindcss

npm install -D tailwindcss@latest postcss@latest autoprefixer@latest

nuxt.config.ts

export default {
    css: [
        '~/assets/tailwind.css',
    ]
}

资产/tailwind.css

npm install -D tailwindcss@latest postcss@latest autoprefixer@latest

但我只能得到原始代码，但不能得到编译后的CSS：

如何在 Nuxt3 中使用 tailwindcss？

任何帮助是极大的赞赏！

在线迷你演示

更新：

Nuxt3 已经支持@nuxtjs/tailwindcss

基本示例

我的应用程序堆栈是 Node14、Vite、Typescript、Vue3、UnoCSS（Antfu 的 Vitesse）。我使用 Storybook 6.5 alpha for Vue3 和 Storybook-builder-vite 插件。

我的目标是我的 Storybook 配置和堆栈与应用程序相同，因此 Storybook 将准确反映已实现的组件。单独维护这些配置将使它们很难保持同步。

有没有办法简化这个？

vite.config.ts：

import path from 'path'
import { defineConfig } from 'vite'
import Vue from '@vitejs/plugin-vue'
import Pages from 'vite-plugin-pages'
import generateSitemap from 'vite-ssg-sitemap'
import Layouts from 'vite-plugin-vue-layouts'
import Components from 'unplugin-vue-components/vite'
import AutoImport from 'unplugin-auto-import/vite'
import Markdown from 'vite-plugin-md'
import { VitePWA } from 'vite-plugin-pwa'
import VueI18n from '@intlify/vite-plugin-vue-i18n'
import Inspect from 'vite-plugin-inspect'
import Prism from 'markdown-it-prism'
import LinkAttributes from 'markdown-it-link-attributes'
import …