Tailwindcss classes are not loading after deployment.

Questions / Help
1

tailwindcss classes are not loading. Does anybody here knows the cause?
I have installed tailwindcss using node.
package.json:

{
    "repository": {},
    "description": " ",
    "license": "MIT",
    "scripts": {
        "deploy": "NODE_ENV=production tailwindcss --postcss --minify --input=css/app.css --output=../priv/static/assets/app.css",
        "build": "node esbuild.js"
    },
    "dependencies": {
        "@editorjs/editorjs": "^2.25.0",
        "@editorjs/list": "^1.7.0",
        "daisyui": "^2.0.2",
        "sortablejs": "^1.12.0"
    },
    "devDependencies": {
        "@compodoc/live-server": "^1.2.3",
        "@tailwindcss/forms": "^0.4.0",
        "autoprefixer": "^10.4.2",
        "esbuild-sass-plugin": "^2.2.3",
        "postcss": "^8.4.6",
        "postcss-import": "^14.0.2",
        "prettier-plugin-tailwindcss": "^0.1.7",
        "tailwindCSS.includeLanguages": {
            "phoenix-heex": "html"
        },
        "tailwindcss": "^3.0.23"
    }
}

Assets.deploy command:

"assets.deploy": [
        "cmd --cd assets npm run deploy",
        "esbuild default --minify",
        "phx.digest"
      ]

esbuild.js:

const esbuild = require("esbuild");
const { sassPlugin } = require("esbuild-sass-plugin");
const postcss = require("postcss");
const autoprefixer = require("autoprefixer");

// Generate CSS/JS Builds
esbuild
  .build({
    entryPoints: ["./css/index.scss"],
    outdir: "css",
    bundle: true,
    metafile: true,
    watch: false,
    plugins: [
      sassPlugin({
        async transform(source) {
          const { css } = await postcss([autoprefixer]).process(source);
          return css;
        },
      }),
    ],
  })
  .then(() => console.log("⚡ Build complete! ⚡"));
2

I had a similar issue in a Laravel app recently -

It turned out the .dockerignore file was ignoring a directory with files that tailwind needed to see, so the Docker build step that ran Tailwind excluded classes I had used (since it didn’t see them used!)

Another possibility that comes to mind is missing config that tells tailwind what files to scan. that seems likely to be your issue - it needs to know what directories/ file globs to use to find files with classes in them so it knows not to strip them out of the final css file it builds. Usually that’s in a tailwind.config.js file. (docs: Installation: Tailwind CLI - Tailwind CSS )

3

Hi @amirhussain,

I think @fideloper-fly is right.

In your tailwind.config.js file, ensure you are telling it where to find your source files that define the classes.

Here’s an example snippet from mine:

module.exports = {
  content: [
    "../**/*.html.eex",
    "../**/*.html.leex",
    "../**/*.html.heex",
    "../../core/lib/schemas/*.ex",
    // get all extracted component files
    "../**/components/**/*.ex",
    // explicitly get the components file
    "../lib/web/components.ex",
    "../**/views/**/*.ex",
    "../**/live/**/*.ex",
    "./js/**/*.js"
  ],

//...

Hope that helps!

4

i just found this link and i don’t know why but changing the sequence of copy commands in DockerFile made it work like a charm.

1 Like