CODEWITHSUNDEEP
vue.jsnuxt.jstailwind-css
Solus90
Solus90

Reputation: 39

Nuxt getting Error: Can't resolve '@tailwindcss/base'

Building a project using NUXT and Tailwind 2. I get the error

Error: Can't resolve '@tailwindcss/base'

My package.json file is:

{
  "name": "vite-example",
  "version": "1.0.0",
  "private": true,
  "scripts": {
    "dev": "nuxt",
    "build": "nuxt build",
    "start": "nuxt start",
    "generate": "nuxt generate"
  },
  "dependencies": {
    "core-js": "^3.8.3",
    "nuxt": "^2.14.12"
  },
  "devDependencies": {
    "@nuxtjs/tailwindcss": "^3.4.2",
    "@tailwindcss/postcss7-compat": "^2.0.3",
    "autoprefixer": "^9.0.0",
    "nuxt-purgecss": "^1.0.0",
    "nuxt-vite": "0.0.36",
    "postcss": "^8.1.9",
    "postcss-import": "^12.0.1",
    "postcss-loader": "^3.0.0",
    "postcss-nested": "^5.0.5",
    "tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.0.3"
  }
}

My nuxt.config.js file has

build: {
  postcss: {
    plugins: {
      'postcss-import': {},
      tailwindcss: path.resolve(__dirname, './tailwind.config.js'),
      'postcss-nested': {}
    }
  },
  preset: {
    stage: 1 // see https://tailwindcss.com/docs/using-with-preprocessors#future-css-featuress
  }
}

And then my tailwind.css is

@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

Upvotes: 2

Views: 8288

Answers (1)

Ihar Aliakseyenka
Ihar Aliakseyenka

Reputation: 14193

Prefix your path with tilde ~

@import "~tailwindcss/base";
@import "~tailwindcss/components";
@import "~tailwindcss/utilities";

Also there is a special directive called tailwind. So you may try

@tailwind base;
@tailwind components;
@tailwind utilities;

Upvotes: 6

Related Questions