使用 Tailwindcss 时浏览器不会自动更新-PHP中文网问答

每次我添加一个类时，要查看更改，我必须停止运行 nuxt，重新加载 VS Code 窗口并再次运行“npm run dev”。然后我就可以看到变化

我的 tailwind.config.js ：

/**@type {import('tailwindcss').Config}*/ module.exports = { content: [ './components/**/*.{js,vue,ts}', './布局/**/*.vue', './pages/**/*.vue', './插件/**/*.{js,ts}', './nuxt.config.{js,ts}' ], theme: { extend: {} }, plugins: [require('daisyui')] }

我将 tailwind.css 文件放在 assets/css/tailwind.css 中

并将其导入到我的布局组件中：layouts/default.vue

我的 nuxt.config.ts：

// https://v3.nuxtjs.org/api/configuration/nuxt.config export default defineNuxtConfig({ css: ['~/assets/css/tailwind.css'], build: { postcss: { postcssOptions: { plugins: { tailwindcss: {}, autoprefixer: {} } } } } })

我的package.json：

{ "private": true, "scripts": { "build": "nuxt build", "dev": "nuxt dev", "generate": "nuxt generate", "preview": "nuxt preview", "postinstall": "nuxt prepare" }, "devDependencies": { "nuxt": "3.0.0-rc.11", "tailwindcss": "^3.1.8" }, "dependencies": { "daisyui": "^2.31.0", "firebase": "^9.10.0" } }

全部回复 (1)

P粉3981178572023-08-27 12:35:52 1 楼

我认为 Nuxt.js 是一个像 NextJs for React 一样进行服务器端渲染的框架。这样，所有数据和 HTML 都由 Nuxt 服务器呈现，该服务器将生成的“html/css”包发送到客户端仅包含您在代码中使用的 css 类。所以我想说，每次你想看到你刚刚添加的 css 类的更改时，重建是正常的。

如果您想直接查看更改而无需每次重新构建（例如在浏览器开发工具中以便轻松编写 css 类），我建议您链接到 HTML 根文件 (index.html)，完整的顺风CSS表。您可以在 tailwind 文档页面上找到一个版本，如下所示：https://tailwindcss。 com/_next/static/css/b606771d290f9908.css

然后您可以在开发工作结束时删除该链接。