¿Qué significa usar un complemento para un paquete para realizar algún trabajo? Quiero decir que todavía no tengo experiencia con paquetes y quería aprender sobre eso creando un flujo de trabajo "profesional" con esbuild y tailwindcss con reaccionar, mecanografiado y todo las golosinas y estoy atascado en la conexión de Tailwind CSS con el eslint y el resto. Sé que para ejecutar Tailwind CSS, la lib necesaria para que funcione es postcss, he seguido los documentos de Tailwind CSS que dicen

 npm install -D tailwindcss npx tailwindcss init

No dice nada sobre postcss, así que supongo que esbuild debería ser responsable de ello, supongo que tiene que hacerse a través de un complemento, hay dos:

https://github.com/karolis-sh/esbuild-postcss npm i postcss esbuild-postcss -D

y

https://github.com/martonlederer/esbuild-plugin-postcss2 npm i -D esbuild-plugin-postcss2

El proceso de instalación del primero incluye postcss y el segundo no, sin embargo, el segundo parece ser más nuevo y "encima" del primero. El problema es que ninguno de ellos funciona... esta es mi configuración de esbuild:

 const { build } = require("esbuild"); build({ publicPath: "http://127.0.0.1:7000/", entryPoints: ["src/app.tsx", "src/app.css"], outdir: "public", // external: ["react", "react-dom"], comented out -throws error cannot use import statement outside a module loader: { ".png": "file", ".jpg": "file", ".jpeg": "file", ".svg": "file", ".gif": "file", }, assetNames: "assets/[name]-[hash]", //-[hash] chunkNames: "chunks/[name]-[hash]", entryNames: "[dir]/[name]", //-[hash] splitting: true, format: "esm", minify: true, bundle: true, sourcemap: "external", // target: ["es2020", "chrome58", "firefox57", "safari11", "edge16", "node12"], pure: ["console.log"], resolveExtensions: [".tsx", ".ts", ".jsx", ".js", ".css", ".json"], inject: ["./process-shim.js", "./react-shim.js"], // watch: { // onRebuild(error, result) { // if (error) console.error("watch build failed:", error); // else console.log("watch build succeeded:", result); // }, // }, }).catch((error) => { console.error(`Build error: ${error}`); process.exit(1); });

y este es mi archivo package.json:

 { "name": "real-world-app", "version": "1.0.0", "description": "this is not a package", "main": "src/app.js", "scripts": { "build": "node ./esbuild.config.js", "watch": "npm run build -- --watch", "start": "npm run css && node ./esbuild.serve.js -w ", "lint": "eslint --fix --debug --cache", "test": "jest", "css": "npx tailwindcss -i ./src/app.css -o ./public/app.css" }, "keywords": [ "conduit" ], "license": "ISC", "repository": { "type": "git", "url": "https://github.com/dziekonskik/real-world-app" }, "dependencies": { "esbuild": "^0.14.2", "esbuild-darwin-64": "^0.14.2", "react": "^17.0.2", "react-dom": "^17.0.2" }, "devDependencies": { "@babel/preset-env": "^7.16.5", "@babel/preset-react": "^7.16.5", "@babel/preset-typescript": "^7.16.5", "@testing-library/dom": "^8.11.1", "@testing-library/jest-dom": "^5.16.1", "@testing-library/react": "^12.1.2", "@testing-library/user-event": "^13.5.0", "@types/jest": "^27.0.3", "@types/react": "^17.0.37", "@types/react-dom": "^17.0.11", "@typescript-eslint/eslint-plugin": "^5.6.0", "@typescript-eslint/parser": "^5.6.0", "esbuild-serve": "^1.0.1", "eslint": "^8.4.1", "eslint-plugin-jest": "^25.3.0", "eslint-plugin-react": "^7.27.1", "eslint-plugin-testing-library": "^5.0.1", "jest": "^27.4.4", "ts-jest": "^27.1.2", "typescript": "^4.5.4" } }

Como servidor de desarrollo, uso el paquete esbuild serve. Cuando ejecuto el comando css, obtengo una especie de salida, sin embargo, es más como css reset que todo el viento de cola, y cuando ejecuto npm run build como salida, obtengo las directivas copiadas.

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

sobre lo cual también mi VScode se queja con advertencias que no sé qué hacer con ellas. ¿Podría explicar cómo debo entender todo este proceso de agrupación y uso de complementos en este ejemplo? ¿Qué me estoy perdiendo? Muchas gracias