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

Question

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!

Mark Gavagan · Accepted Answer · 2021-09-11 09:07:13Z

4

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).

edited Sep 11, 2021 at 9:07

Mark Gavagan

1,2321 gold badge19 silver badges50 bronze badges

answered Sep 8, 2021 at 20:30

tony19

140k23 gold badges281 silver badges354 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

CPPUIX · Accepted Answer · 2024-01-13 10:05:50Z

0

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

npx tailwindcss init -p

edited Jan 13, 2024 at 10:05

CPPUIX

2,4178 gold badges17 silver badges38 bronze badges

answered Jan 4, 2024 at 12:01

romeo gaspar

1

Comments

Marin Nikolli · Accepted Answer · 2025-03-17 23:49:28Z

0

After running the command in your terminal:

npx tailwindcss init

Based on the type of installation you made of tailwind - if you installed autoprefixer and postcss with tailwind - this command will create additional files, among them also postcss.config.js the content inside should look like this:

v2 & v3:

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  }
}

otherwise, it will be the standard tailwind.config.js, with its content is more or less the standard:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{html,js}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

answered Mar 17 at 23:49

Marin Nikolli

19 bronze badges

Collectives™ on Stack Overflow

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

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related