Tailwind can not recognize the classes I add in the component .ex file

Hi friend, when I add a text-red class into heex file in live directory the Tailwind works as perfect as possible, but if I add new class in a component .ex file it has no reaction and when I see it in my browser it does not add it as class.

For example:

lib/mishka_template_creator_web/components/mishka_core_component.ex

  @spec delete_block(map) :: Phoenix.LiveView.Rendered.t()
  defp delete_block(assigns) do
    ~H"""
    <img
      src="/images/trash.svg"
      alt="Show dark mode or light one"
      class="w-6 h-6 cursor-pointer bg-red-400"
      phx-click="dark_mod"
      phx-value-type=""
      phx-value-id=""
    />
    """
  end

By the way, when I am writing the bg- it does not show the possible option like red or blue

My Tailwind config:

module.exports = {
  content: [
    "./js/**/*.js",
    "./vendor/mishka_template_creator/*.js",
    "../lib/*_web.ex",
    "../lib/*_web/**/*.ex", // I added to test, but it did not work
    "../lib/*_web/**/*.*ex",
  ],

Thank you in advance

which phoenix and LV versions?

I think it is fixed, I run again:

mix tailwind.install

And

mix tailwind default

but auto autocomplete still does not work in VS Code (.ex file as component)

{:phoenix, "~> 1.7.0-rc.0", override: true},
{:esbuild, "~> 0.6", runtime: Mix.env() == :dev},
{:tailwind, "~> 0.1.9", runtime: Mix.env() == :dev},
{:phoenix_live_view, "~> 0.18.3"},

You can configure the tailwind intellisense plugin, I added these two entries and I can get completions :slight_smile:

Not sure if both of them are needed or not, I just stopped tinkering when it worked :sweat_smile:

3 Likes