CODEWITHSUNDEEP
vue.jsvuejs3tailwind-css
Mark Gavagan
Mark Gavagan

Reputation: 1172

When installing Tailwind CSS in Vue 3, do I need a postcss.config.js file?

I'm struggling to install Tailwind CSS 2.2.10 in a Vue 3 project without Vite (so the "Install Tailwind CSS with Vue 3 and Vite" instructions do not apply)

Within the installation documentation, the "Add Tailwind as a PostCSS plugin" section reads:

Add tailwindcss and autoprefixer to your PostCSS configuration. Most of the time this is a postcss.config.js file at the root of your project, but it could also be a .postcssrc file, or postcss key in your package.json file.

Is "postcss": "^8.3.6", in my package.json file the "postcss key" mentioned in the docs (see bold above), or do I need a postcss.config.js file?

Thanks!

Upvotes: 2

Views: 1759

Answers (2)

romeo gaspar
romeo gaspar

Reputation: 1

Run this command in order to create postcss.config.js:

npx tailwindcss init -p

Upvotes: 0

tony19
tony19

Reputation: 138696

No, "postcss": "^8.3.6" in the package.json file is not the "postcss key" mentioned in the docs - it's the version specifier for the postcss dependency.

The "postcss key in your package.json file" refers to a postcss root property in the JSON:

// package.json
{
  "name": "my-project",
  "version": "0.1.0",
  "dependencies": {
    /*...*/
  }, 👇
  "postcss": {
    "plugins": {
      "tailwindcss": {},
      "autoprefixer": {},
    }
  }
}

If you prefer not to store the config in package.json, you could use one of the other possible locations where the PostCSS config is read, including postcss.config.js. However, you don't need more than one PostCSS config file (e.g., postcss.config.js in addition to the postcss key in package.json).

Upvotes: 4

Related Questions