Skip to content

fix(tailwindcss): remove @source directive from css file#28

Merged
mhanberg merged 1 commit intoelixir-tools:mainfrom
andyl:site_css
Jul 5, 2025
Merged

fix(tailwindcss): remove @source directive from css file#28
mhanberg merged 1 commit intoelixir-tools:mainfrom
andyl:site_css

Conversation

@andyl
Copy link
Contributor

@andyl andyl commented Jul 4, 2025

The line @source './site.css'; in site.css caused Tailwind to generate invalid CSS, breaking styling completely.

(ubuntu 22.04 / tailwind 4.10.0 / tableau_new 1.5.0)

To generate the Tableau site: mix tableau.new mysite --template heex --assets tailwind

My styling test case, from lib/pages/home_page.ex:

  def template(assigns) do
    ~H"""
    <p class="bg-amber-300">
      hello, world!
    </p>
    """
  end

After removing the line in site.css, the styling with Tailwind4 is working.

The line "@source './site.css';" caused Tailwind to fail.
(ubuntu 22.04 / tailwind 4.10.0)
After removing this line the styling with Tailwind4 is working.
@mhanberg
Copy link
Contributor

mhanberg commented Jul 5, 2025

I confirmed this didn't work before and that this fixes it, but I don't believe its a v4 problem. I think the combination of using this @source directive and it using the standalone tailwind cli is having a weird problem.

But also, this directive isn't necessary. I copied it out of my blog, but I don't think I needed it.

@mhanberg mhanberg changed the title fix(tailwind): fix CSS for Tailwind4 fix(tailwindcss): remove @source directive from css file Jul 5, 2025
@mhanberg mhanberg merged commit bf50e90 into elixir-tools:main Jul 5, 2025
6 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants