DEV Community

Cover image for Move your tailwind's postcss.config.js to package.json to reduce config files
Praveen Juge for Myna UI

Posted on • Originally published at mynaui.com

Move your tailwind's postcss.config.js to package.json to reduce config files

When using only TailwindCSS with postcss in your app, you will see something like this in your postcss.config.js file:

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  }
}
Enter fullscreen mode Exit fullscreen mode

If there is no other plugins needed, you can move this config to your package.json file like this:

{
  "name": "test",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "build": "next build",
    "dev": "next dev",
    "lint": "next lint",
    "start": "next start"
  },
  "dependencies": {
    "autoprefixer": "10.4.15",
    "next": "13.4.19",
    "postcss": "8.4.29",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "tailwindcss": "3.3.3"
  },
  "postcss": {
    "plugins": {
      "tailwindcss": {},
      "autoprefixer": {}
    }
  }
}
Enter fullscreen mode Exit fullscreen mode

This is mainly aimed to make the root folder of your project cleaner with less unneeded config files.

Top comments (0)