I'm facing a Tailwind CSS issue after deploying on Render

Question

The following code works perfectly when running the project locally and gives me exactly the result I need but for deployment on Render.com doesn't work.

@font-face {
  font-family: "Kodchasan";
  src: url("/src/assets/fonts/Kodchasan-Light.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}

@import "tailwindcss";

@theme {
  --font-kodchasan: Kodchasan, "sans-serif";
}

I tried this but after deployment, it doesn't render correctly. Alternatively, the version below works in deployment, but the styles appear broken:

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

@font-face {
  font-family: "Kodchasan";
  src: url("/fonts/Kodchasan-Light.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}

body {
  font-family: "Kodchasan", sans-serif;
}

Although I wrote my answer based on the current form of the question, it turns out the OP is also dealing with an error message. So unfortunately, while my answer might be correct, the question itself was asked incorrectly or incompletely. — rozsazoltan
– rozsazoltan, Commented May 16 at 16:19

rozsazoltan · Accepted Answer · 2025-05-16 16:25:36Z

0

You're using TailwindCSS v4. Most AI responses and online resources are written for v3, so they're not relevant. The @tailwind directive is no longer used in v4, so your first code snippet was imported correctly.

Removed @tailwind directives - StackOverflow

As a note on the first snippet: imports should always be placed at the top of the file, like this:

Browsers require that @import statements come before any other rules, so URL imports need to be above imports like @import "tailwindcss" which are inlined in the compiled CSS.

Source: Customizing your theme with --font-* namespace - TailwindCSS v4 Docs

@import "tailwindcss";

@font-face {
  font-family: "Kodchasan";
  src: url("/src/assets/fonts/Kodchasan-Light.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}

@theme {
  --font-kodchasan: Kodchasan, "sans-serif";
}

@layer base {
  body {
    font-family: "Kodchasan", sans-serif;
  }
}

Custom @font-face Font Ignored by Tailwind CSS v4 with Vite and React - StackOverflow

edited May 16 at 16:25

answered May 16 at 15:15

rozsazoltan

18.4k8 gold badges49 silver badges147 bronze badges

Sign up to request clarification or add additional context in comments.

15 Comments

shirin es May 16 at 15:29

Thank you so much for your comment. so if I move the import "tailwindcss"; then the deploy works perfect?

rozsazoltan May 16 at 15:33

Exactly. All imports should be placed at the beginning of the CSS file.

rozsazoltan May 16 at 15:41

@shirines If you found my answer helpful, please consider marking it with an upvote and a checkmark so the system can rank it higher for others as well.

shirin es May 16 at 15:50

that is correct but this code is not working for deployment on Render.com. and I got this correct [@tailwindcss/vite:generate:build] Can't resolve 'tailwindcss' in '/opt/render/project/src/Client/src' file: /opt/render/project/src/Client/src/index.css

rozsazoltan May 16 at 15:51

Ohm... npm install tailwindcss @tailwindcss/vite and use import tailwindcss from "@tailwindcss/vite" instead of import tailwindcss from "tailwindcss" in vite.config.js as documentation recommended for Vite: tailwindcss.com/docs/installation/using-vite

|

Collectives™ on Stack Overflow

I'm facing a Tailwind CSS issue after deploying on Render

1 Answer 1

15 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

15 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related