# Tailwind CSS v4.0 Beta

**URL:** <https://discourse.gohugo.io/t/tailwind-css-v4-0-beta/52938>\
**Category:** support\
**Created:** [December 31, 2024, 11:59am UTC](https://discourse.gohugo.io/t/tailwind-css-v4-0-beta/52938 "2024-12-31T11:59:35Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![jswtch](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/jswtch/32/8984_2.png) [@jswtch](https://discourse.gohugo.io/u/jswtch)\
**Post date:** [December 31, 2024, 11:59am UTC](https://discourse.gohugo.io/t/tailwind-css-v4-0-beta/52938/1 "2024-12-31T11:59:35Z")

</div>

I want to build a new theme and would like to try [Tailwind CSS v4.0 Beta](https://tailwindcss.com/docs/v4-beta). Is [Hugo v0.128](https://github.com/gohugoio/hugo/releases/tag/v0.128.0) still the best reference? Do any of the more recent versions have any implications for this setup like [js.Batch](https://gohugo.io/functions/js/batch/)? Thanks, happy holidays.

---

<div class="post-metadata">

**Author:** ![Heracles](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/heracles/32/19379_2.png) [@Heracles](https://discourse.gohugo.io/u/Heracles)\
**Post date:** [January 1, 2025, 7:55pm UTC](https://discourse.gohugo.io/t/tailwind-css-v4-0-beta/52938/2 "2025-01-01T19:55:23Z")

</div>

There are apparently some improvements / fixes in the v.0.140.x releases. Given that Tailwind v4.0 introduces the “[css-first configuration](https://tailwindcss.com/docs/v4-beta#css-first-configuration)” there is likely no need for any JavaScript tooling. Quite surprising to me a CSS framework didn’t have that already.

---

<div class="post-metadata">

**Author:** ![bep](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/bep/32/3332_2.png) [@bep](https://discourse.gohugo.io/u/bep)\
**Post date:** [January 2, 2025, 9:47am UTC](https://discourse.gohugo.io/t/tailwind-css-v4-0-beta/52938/3 "2025-01-02T09:47:43Z")

</div>

> [@jswtch](#):
>
> I want to build a new theme and would like to try [Tailwind CSS v4.0 Beta](https://tailwindcss.com/docs/v4-beta). Is [Hugo v0.128](https://github.com/gohugoio/hugo/releases/tag/v0.128.0) still the best reference?

The new css.TailwindCSS function in 0.128 is _the thing_ for v4, but I would recommend upgrading to the latest – as there have been some related bug fixes (for one, I think there was a issue with CSS not being refreshed when running the server).

I have been using TailwindCSS v4 with Hugo very actively lately and it works very well. The only major issue I have found is that the intellisense plugin in VS code doesn’t work. There are similar upstream reports about this, so I assume this will be fixed.

---

<div class="post-metadata">

**Author:** ![bep](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/bep/32/3332_2.png) [@bep](https://discourse.gohugo.io/u/bep)\
**Post date:** [January 2, 2025, 10:11am UTC](https://discourse.gohugo.io/t/tailwind-css-v4-0-beta/52938/4 "2025-01-02T10:11:49Z")

</div>

As to the intellisense part, looks like we got some upstream attention: [Tailwind Intellisense not working in VSCode · Issue #4 · bep/hugo-testing-tailwindcss-v4 · GitHub](https://github.com/bep/hugo-testing-tailwindcss-v4/issues/4#issuecomment-2567184390)

---

<div class="post-metadata">

**Author:** ![regis](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/regis/32/4958_2.png) [@regis](https://discourse.gohugo.io/u/regis)\
**Post date:** [February 19, 2025, 3:39pm UTC](https://discourse.gohugo.io/t/tailwind-css-v4-0-beta/52938/5 "2025-02-19T15:39:17Z")

</div>

Have you been able to use a js config file? I know the point of v4 is to move away from the js config file, but it can be a lengthy upgrade on some projects, plus the [Tailwind Typography](https://github.com/tailwindlabs/tailwindcss-typography) in-house plugin is not ready to move away from a js config file.

Now Tailwind 4 lets you [set a path to your js config file](https://tailwindcss.com/docs/upgrade-guide#using-a-javascript-config-file) with:

```auto
/* /assets/main.css/ */
@config "./config/tailwind.config.js";

```

The problem is that I’m not sure where Hugo will be looking for this file when processing the main css using it. Right now the path set is relative to the `main.css` asset file so I have  
main css \> `/assets/main.css`  
tailwind.config.js \> `/assets/config/tailwind.config.js`

But when running Hugo (with templates.Defer) I get

```auto
Error: error building site: TAILWINDCSS: failed to transform "/css/main.css" (text/css): Error: Can't resolve './config/tailwind.config.js' in ...

```

Thanks!

---

<div class="post-metadata">

**Author:** ![bep](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/bep/32/3332_2.png) [@bep](https://discourse.gohugo.io/u/bep)\
**Post date:** [February 19, 2025, 4:27pm UTC](https://discourse.gohugo.io/t/tailwind-css-v4-0-beta/52938/6 "2025-02-19T16:27:42Z")

</div>

> [@regis](#):
>
> `@config "./config/tailwind.config.js";`

The @config (and also @source) paths needs to be relative to PWD (e.g. the directory where Tailwind/Hugo is run from), which means that you in most cases want to do:

```auto
@config "tailwind.config.js";

```