How add custom css color to Phoenix with Tailwind?

Phoenix Forum Questions / Help
,
1

I have read this doc for tailwind css. And tried to add custom color to tailwind.config.js.

theme: {
    extend: {},
    colors: {
      transparent: 'transparent',
      current: 'currentColor',
      primary: '#5c6ac4',
      secondary: '#ecc94b',
    },
  },

Then i used it in project

    <h1 class="text-secondary mt-10 flex items-center text-sm font-semibold leading-6">
      <%= :application.get_application(__MODULE__) |> elem(1) %>
      <small class="bg-brand/5 text-[0.8125rem] ml-3 rounded-full px-2 font-medium leading-6">
        v<%= Application.spec(:application.get_application(__MODULE__) |> elem(1), :vsn) %>
      </small>
    </h1>

But it didn’t work, text was black. VS Code Extension - Tailwind CSS IntelliSense shows correct color near text-secondary.

phoenix project was generated with command
$ mix phx.new tailwind --app learn_tw --no-mailer --module LearnTW --umbrella

Phoenix version 1.7.7
tailwind version 0.2.1

2

Found my mistake.

This command
$ mix phx.new tailwind --app learn_tw --no-mailer --module LearnTW --umbrella
generates two assets:

  • one in root of umbrella
  • second in apps/learn_tw_web/priv/static

I configured tailwind.config.js in first assets dir, it was my mistake.