title: Using Tailwind CSS with esbuild - the process
body: <p>What does it mean to use a plugin to a bundler to perform some work, I mean I have no experience with bundlers whatsoever yet and I wanted to learn about that by creating a &quot;professional&quot; workflow with esbuild and tailwindcss with react, typescript and all the goodies and I am stuck on connecting tailwind css to the eslint and the rest.
  I know that to run tailwind css the necessary lib to make it work is postcss, I have followed the tailwind css docs which says</p>
  <pre><code>npm install -D tailwindcss
  npx tailwindcss init
  </code></pre>
  <p>It says nothing about postcss so I assume that esbuild should be reponsible for it, I assume that is has to bedone via plugin, there are two:</p>
  <p><em><a href="https://github.com/karolis-sh/esbuild-postcss" rel="noreferrer">https://github.com/karolis-sh/esbuild-postcss</a>
  npm i postcss esbuild-postcss -D</em></p>
  <p>and</p>
  <p><em><a href="https://github.com/martonlederer/esbuild-plugin-postcss2" rel="noreferrer">https://github.com/martonlederer/esbuild-plugin-postcss2</a>
  npm i -D esbuild-plugin-postcss2</em></p>
  <p>Instalation process of the first one includes postcss and the second one does not, hovewer the second one seems to be newer and kind of &quot;on top of&quot; the first one.
  The problem is none of them is working... this is my esbuild config:</p>
  <pre><code>
      const { build } = require(&quot;esbuild&quot;);
      
      build({
        publicPath: &quot;http://127.0.0.1:7000/&quot;,
        entryPoints: [&quot;src/app.tsx&quot;, &quot;src/app.css&quot;],
        outdir: &quot;public&quot;,
        // external: [&quot;react&quot;, &quot;react-dom&quot;], comented out -throws error cannot use import statement outside a module
        loader: {
          &quot;.png&quot;: &quot;file&quot;,
          &quot;.jpg&quot;: &quot;file&quot;,
          &quot;.jpeg&quot;: &quot;file&quot;,
          &quot;.svg&quot;: &quot;file&quot;,
          &quot;.gif&quot;: &quot;file&quot;,
        },
        assetNames: &quot;assets/[name]-[hash]&quot;, //-[hash]
        chunkNames: &quot;chunks/[name]-[hash]&quot;,
        entryNames: &quot;[dir]/[name]&quot;, //-[hash]
        splitting: true,
        format: &quot;esm&quot;,
        minify: true,
        bundle: true,
        sourcemap: &quot;external&quot;,
        // target: [&quot;es2020&quot;, &quot;chrome58&quot;, &quot;firefox57&quot;, &quot;safari11&quot;, &quot;edge16&quot;, &quot;node12&quot;],
        pure: [&quot;console.log&quot;],
        resolveExtensions: [&quot;.tsx&quot;, &quot;.ts&quot;, &quot;.jsx&quot;, &quot;.js&quot;, &quot;.css&quot;, &quot;.json&quot;],
        inject: [&quot;./process-shim.js&quot;, &quot;./react-shim.js&quot;],
        // watch: {
        //   onRebuild(error, result) {
        //     if (error) console.error(&quot;watch build failed:&quot;, error);
        //     else console.log(&quot;watch build succeeded:&quot;, result);
        //   },
        // },
      }).catch((error) =&gt; {
        console.error(`Build error: ${error}`);
        process.exit(1);
      });
  
  </code></pre>
  <p>and this is my package.json file:</p>
  <pre><code>
      {
        &quot;name&quot;: &quot;real-world-app&quot;,
        &quot;version&quot;: &quot;1.0.0&quot;,
        &quot;description&quot;: &quot;this is not a package&quot;,
        &quot;main&quot;: &quot;src/app.js&quot;,
        &quot;scripts&quot;: {
          &quot;build&quot;: &quot;node ./esbuild.config.js&quot;,
          &quot;watch&quot;: &quot;npm run build -- --watch&quot;,
          &quot;start&quot;: &quot;npm run css &amp;&amp; node ./esbuild.serve.js -w &quot;,
          &quot;lint&quot;: &quot;eslint --fix --debug --cache&quot;,
          &quot;test&quot;: &quot;jest&quot;,
          &quot;css&quot;: &quot;npx tailwindcss -i ./src/app.css -o ./public/app.css&quot;
        },
        &quot;keywords&quot;: [
          &quot;conduit&quot;
        ],
        &quot;license&quot;: &quot;ISC&quot;,
        &quot;repository&quot;: {
          &quot;type&quot;: &quot;git&quot;,
          &quot;url&quot;: &quot;https://github.com/dziekonskik/real-world-app&quot;
        },
        &quot;dependencies&quot;: {
          &quot;esbuild&quot;: &quot;^0.14.2&quot;,
          &quot;esbuild-darwin-64&quot;: &quot;^0.14.2&quot;,
          &quot;react&quot;: &quot;^17.0.2&quot;,
          &quot;react-dom&quot;: &quot;^17.0.2&quot;
        },
        &quot;devDependencies&quot;: {
          &quot;@babel/preset-env&quot;: &quot;^7.16.5&quot;,
          &quot;@babel/preset-react&quot;: &quot;^7.16.5&quot;,
          &quot;@babel/preset-typescript&quot;: &quot;^7.16.5&quot;,
          &quot;@testing-library/dom&quot;: &quot;^8.11.1&quot;,
          &quot;@testing-library/jest-dom&quot;: &quot;^5.16.1&quot;,
          &quot;@testing-library/react&quot;: &quot;^12.1.2&quot;,
          &quot;@testing-library/user-event&quot;: &quot;^13.5.0&quot;,
          &quot;@types/jest&quot;: &quot;^27.0.3&quot;,
          &quot;@types/react&quot;: &quot;^17.0.37&quot;,
          &quot;@types/react-dom&quot;: &quot;^17.0.11&quot;,
          &quot;@typescript-eslint/eslint-plugin&quot;: &quot;^5.6.0&quot;,
          &quot;@typescript-eslint/parser&quot;: &quot;^5.6.0&quot;,
          &quot;esbuild-serve&quot;: &quot;^1.0.1&quot;,
          &quot;eslint&quot;: &quot;^8.4.1&quot;,
          &quot;eslint-plugin-jest&quot;: &quot;^25.3.0&quot;,
          &quot;eslint-plugin-react&quot;: &quot;^7.27.1&quot;,
          &quot;eslint-plugin-testing-library&quot;: &quot;^5.0.1&quot;,
          &quot;jest&quot;: &quot;^27.4.4&quot;,
          &quot;ts-jest&quot;: &quot;^27.1.2&quot;,
          &quot;typescript&quot;: &quot;^4.5.4&quot;
        }
      }
  
  </code></pre>
  <p>As a development server i use package esbuild serve. When I run the css command i get kind of an output, hovewer it is more like css reset that the whole tailwind, and when I run npm run build as an output I get the copied directives</p>
  <pre><code>@tailwind base;
  @tailwind components;
  @tailwind utilities;
  </code></pre>
  <p>about which also my VScode is complaining with warnings I do not know what to do with them.
  Would you please explain how should I understand this entire process of bundling and using plugins on this example? What am i missing?
  Thanks a lot</p>