CODEWITHSUNDEEP
vue.jsnuxt.jstailwind-css
Maxime
Maxime

Reputation: 357

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

I have created a Nuxt application with TailwindCSS. For some reason, the square bracket notation from Tailwind doesn't work. If I have this div =>

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

the h-[155px] class is ignored. If instead I use h-24, it works fine, the height is applied. I have also noticed that I haven't got an assets/css/tailwind.css directory. Is this normal ? Could it be the reason it doesn't work ? This is my nuxt.config.js file =>

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: {},
}

and this is my 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"
  }
}

Upvotes: 3

Views: 2763

Answers (1)

kissu
kissu

Reputation: 46612

If you create a brand new project everything is working perfectly fine as shown in this Github repo, supposing you're using the latest version of the Nuxt module (hence Tailwind v3).

enter image description here

Meanwhile, if you have a repro or a Github repo, or even some errors while installing your node_modules, I may have some leads on how to debug those (mainly yarn upgrade).

But the issue may come more from the package.json actually.

PS: you don't need assets/css/tailwind.css if you're using the Nuxt module as you can see in my linked working project.

Upvotes: 1

Related Questions