Tailwind css

[Aswin2667]

How to install Tailwind css to this boiler plate

[kinngh]

If you can't install Tailwind on a regular Next.js project, maybe you want to re-evaluate your life choices.

[Aswin2667]

iam just college student starting to learn

[Aswin2667]

help iam creating a college project

[Aswin2667]

i tried install https://tailwindcss.com/docs/guides/nextjs but after that i tried to run the code it shows like this

⨯ ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[6].oneOf[11].use[1]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[6].oneOf[11].use[2]!./node_modules/@shopify/polaris/build/esm/styles.css Error [ERR_REQUIRE_ESM]: require() of ES Module /home/cartrabbit/cahsback_shoppify_app/postcss.config.js from /home/cartrabbit/cahsback_shoppify_app/node_modules/next/dist/lib/find-config.js not supported. postcss.config.js is treated as an ES module file as it is a .js file whose nearest parent package.json contains "type": "module" which declares all .js files in that package scope as ES modules. Instead either rename postcss.config.js to end in .cjs, change the requiring code to use dynamic import() which is available in all CommonJS modules, or change "type": "module" to "type": "commonjs" in /home/cartrabbit/cahsback_shoppify_app/package.json to treat all .js files as CommonJS (using .mjs for all ES modules instead). Import trace for requested module: ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[6].oneOf[11].use[1]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[6].oneOf[11].use[2]!./node_modules/@shopify/polaris/build/esm/styles.css ./node_modules/@shopify/polaris/build/esm/styles.css ⨯ ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[6].oneOf[11].use[1]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[6].oneOf[11].use[2]!./node_modules/@shopify/polaris/build/esm/styles.css Error [ERR_REQUIRE_ESM]: require() of ES Module /home/cartrabbit/cahsback_shoppify_app/postcss.config.js from /home/cartrabbit/cahsback_shoppify_app/node_modules/next/dist/lib/find-config.js not supported. postcss.config.js is treated as an ES module file as it is a .js file whose nearest parent package.json contains "type": "module" which declares all .js files in that package scope as ES modules. Instead either rename postcss.config.js to end in .cjs, change the requiring code to use dynamic import() which is available in all CommonJS modules, or change "type": "module" to "type": "commonjs" in /home/cartrabbit/cahsback_shoppify_app/package.json to treat all .js files as CommonJS (using .mjs for all ES modules instead). Import trace for requested module: ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[6].oneOf[11].use[1]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[6].oneOf[11].use[2]!./node_modules/@shopify/polaris/build/esm/styles.css ./node_modules/@shopify/polaris/build/esm/styles.css

[kinngh]

Irrespective of your experience level, there's a proper way to ask for help.

Bad: How to install Tailwind css to this boiler plate
Good: I tried following the docs at <url> and got this error. Is this a known error or I'm doing something wrong?

Now about your error, since you dumped the entire log instead of reading through it, here's what's happening.

The project follows ESModules style, not CommonJS, which means some things might literally tell you "type": "module" which declares all .js files in that package scope as ES modules. Instead either rename postcss.config.js to end in .cjs, change the requiring code to use dynamic import() which is available in all CommonJS modules, or change "type": "module" to "type": "commonjs" in /home/cartrabbit/cahsback_shoppify_app/package.json to treat all .js files as CommonJS (using .mjs for all ES modules instead). which means you can either remove the type: module from your package.json (not recommended since you don't know the difference), or you can rename your postcss file to end in a cjs extension, instead of js.

Again, and take this seriously, learn the baseline JavaScript first and what modern and ancient JS is, before hopping on to creating high availability and critical apps in the ecommerce space.