来自 Tailwind 的自定义类的方括号表示法在 Nuxt 应用程序中不起作用

Question

我已经使用 TailwindCSS 创建了一个 Nuxt 应用程序。出于某种原因，Tailwind 中的方括号表示法不起作用。如果我有这个 div =>

<div class="h-[155px] bg-red-300">some text</div>

h-[155px] class 被忽略。相反，如果我使用 h-24，它工作正常，应用了高度。我还注意到我没有 assets/css/tailwind.css 目录。这是正常的吗？这可能是它不起作用的原因吗？这是我的 nuxt.config.js 文件 =>

export default {
  // Disable server-side rendering: https://go.nuxtjs.dev/ssr-mode
  ssr: false,

  // Global page headers: https://go.nuxtjs.dev/config-head
  head: {
    title: 'gimm',
    htmlAttrs: {
      lang: 'en',
    },
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: '' },
      { name: 'format-detection', content: 'telephone=no' },
    ],
    link: [{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }],
  },

  // Global CSS: https://go.nuxtjs.dev/config-css
  css: [],

  // Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
  plugins: [],

  // Auto import components: https://go.nuxtjs.dev/config-components
  components: true,

  // Modules for dev and build (recommended): https://go.nuxtjs.dev/config-modules
  buildModules: [
    // https://go.nuxtjs.dev/eslint
    '@nuxtjs/eslint-module',
    // https://go.nuxtjs.dev/tailwindcss
    '@nuxtjs/tailwindcss',
  ],

  // Modules: https://go.nuxtjs.dev/config-modules
  modules: [
    // https://go.nuxtjs.dev/axios
    '@nuxtjs/axios',
  ],

  // Axios module configuration: https://go.nuxtjs.dev/config-axios
  axios: {
    // Workaround to avoid enforcing hard-coded localhost:3000: https://github.com/nuxt-community/axios-module/issues/308
    baseURL: '/',
  },

  // Build Configuration: https://go.nuxtjs.dev/config-build
  build: {},
}

这是我的 package.json =>

{
  "name": "gimm",
  "version": "1.0.0",
  "private": true,
  "scripts": {
    "dev": "nuxt",
    "build": "nuxt build",
    "start": "nuxt start",
    "generate": "nuxt generate",
    "lint:js": "eslint --ext \".js,.vue\" --ignore-path .gitignore .",
    "lint:prettier": "prettier --check .",
    "lint": "yarn lint:js && yarn lint:prettier",
    "lintfix": "prettier --write --list-different . && yarn lint:js --fix"
  },
  "dependencies": {
    "@nuxtjs/axios": "^5.13.6",
    "core-js": "^3.19.3",
    "nuxt": "^2.15.8",
    "vue": "^2.6.14",
    "vue-server-renderer": "^2.6.14",
    "vue-template-compiler": "^2.6.14",
    "webpack": "^4.46.0"
  },
  "devDependencies": {
    "@babel/eslint-parser": "^7.16.3",
    "@nuxtjs/eslint-config": "^8.0.0",
    "@nuxtjs/eslint-module": "^3.0.2",
    "@nuxtjs/tailwindcss": "^4.2.1",
    "eslint": "^8.4.1",
    "eslint-config-prettier": "^8.3.0",
    "eslint-plugin-nuxt": "^3.1.0",
    "eslint-plugin-vue": "^8.2.0",
    "postcss": "^8.4.4",
    "prettier": "^2.5.1"
  }
}

Answer 1

如果您创建了一个全新的项目，一切正常，如此 Github repo 所示，假设您使用的是最新版本的 Nuxt 模块（因此是 Tailwind v3）。

与此同时，如果您有一个 repro 或 Github repo，或者在安装 node_modules 时甚至出现一些错误，我可能会提供一些关于如何调试它们的线索（主要是 yarn upgrade).

但实际上问题可能更多来自 package.json。

PS：如果您使用的是 Nuxt 模块，则不需要 assets/css/tailwind.css，正如您在我的链接工作项目中看到的那样。

来自 Tailwind 的自定义类的方括号表示法在 Nuxt 应用程序中不起作用

Square bracket notation for custom classes from Tailwind doesn't work in a Nuxt application

nuxt.js

tailwind-css

来自 Tailwind 的自定义 类 的方括号表示法在 Nuxt 应用程序中不起作用

Square bracket notation for custom classes from Tailwind doesn't work in a Nuxt application

nuxt.js

tailwind-css

来自 Tailwind 的自定义类的方括号表示法在 Nuxt 应用程序中不起作用