CODEWITHSUNDEEP
javascriptcssreactjstailwind-cssesbuild
seven
seven

Reputation: 1674

tailwindcss with edbuild not fetching classes and being overwritten

I want to create workflow with React, esbuild and tailwindcss. In tailwind docs, they say that apart from creating config file, I need to put a couple of @tailwind directives into src/input.css and run compilation with this command:

npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch

So I did, and it resulted with something that looked like a scaffold or CSS reset, there were no utility classes inside, and also I would like it to work with my custom CSS, which is very simple because as I am learning esbuild I did not use preprocessors yet, so I took two approaches:

  1. I have added /src/input.css to my entryPoints in esbuild.serve.js to look like this:
import esbuildServe from "esbuild-serve";

esbuildServe(
  {
    publicPath: "http://127.0.0.1:7000/",
    entryPoints: ["src/app.tsx", "src/app.css", "src/input.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]",
    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"],
  },
  { port: 7000, root: "public" }
);

but even this reset got completely overwritten by my other stylesheet, and I am getting warnings saying:

 > src/input.css:3:0: warning: "@tailwind" is not a known rule name
    3 │ @tailwind utilities;
      ╵ ~~~~~~~~~

So my second idea was to include those tailwind directives into mine main CSS file and build it together like so:

//app.css
@import "./components/test.css";
@tailwind base;
@tailwind components;
@tailwind utilities;
.color-heading {
  color: tomato;
}

However, the result is that in my out.css I have those imports but not the expected CSS from tailwind. From here on, I don't know what to do. Those are my scripts:

  "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"
  },

Any help will be appreciated, thanks.

Upvotes: 1

Views: 1229

Answers (1)

Bradia
Bradia

Reputation: 857

I am using esbuild to process sass and tailwindcss and import them in jsx files. I added them as the plugin in esbuild config file.

import { sassPlugin } from 'esbuild-sass-plugin'
import postcss from 'postcss';
import autoprefixer from 'autoprefixer';
import postcssPresetEnv from 'postcss-preset-env';
import tailwindcss from 'tailwindcss';
...
...
...
loader: { '.ts': 'ts', '.js': 'jsx' },
plugins: [
        sassPlugin({
            async transform(source, resolveDir) {
              const {css} = await postcss([tailwindcss({
                content: ["./src/**/*.{js,jsx,ts,tsx}",],
                theme: {
                  extend: {},
                },
                plugins: [],
              }), autoprefixer, postcssPresetEnv]).process(source, {from: undefined})
              return css
            },
            type: 'style',
             filter: /.(s[ac]ss|css)$/,
          })
      ],
...
  • postcss-preset-env is optional.

Upvotes: 0

Related Questions