petalframework / petal_boilerplate

Phoenix + Tailwind + Petal Components Boilerplate
https://petal.build
153 stars 21 forks source link

`bg-primary-600` class does not exist error #24

Closed belgoros closed 2 months ago

belgoros commented 2 months ago

I used the latest version of petal_compoents, 2.0.3 and set up the project as the docs explain. Here is the mix.exs deps/0 function:

defp deps do
    [
      {:phoenix, "~> 1.7.14"},
      {:phoenix_ecto, "~> 4.5"},
      {:ecto_sql, "~> 3.10"},
      {:postgrex, ">= 0.0.0"},
      {:phoenix_html, "~> 4.1"},
      {:phoenix_live_reload, "~> 1.2", only: :dev},
      # TODO bump on release to {:phoenix_live_view, "~> 1.0.0"},
      {:phoenix_live_view, "~> 1.0.0-rc.1", override: true},
      {:floki, ">= 0.30.0", only: :test},
      {:esbuild, "~> 0.8", runtime: Mix.env() == :dev},
      {:tailwind, "~> 0.2", runtime: Mix.env() == :dev},
      {:heroicons,
       github: "tailwindlabs/heroicons",
       tag: "v2.1.5",
       sparse: "optimized",
       app: false,
       compile: false,
       depth: 1},
      {:swoosh, "~> 1.5"},
      {:finch, "~> 0.13"},
      {:telemetry_metrics, "~> 1.0"},
      {:telemetry_poller, "~> 1.0"},
      {:gettext, "~> 0.20"},
      {:jason, "~> 1.2"},
      {:dns_cluster, "~> 0.1.1"},
      {:bandit, "~> 1.5"},
      {:petal_components, "~> 2.0.3"}
    ]
  end

When starting the application, I get this error:

Rebuilding...
CssSyntaxError: tailwindcss: /Users/serguei/github/elixir/phoenix/calendlex/deps/petal_components/assets/default.css:52:3: The `bg-primary-600` class does not exist. If `bg-primary-600` is a custom class, make sure it is defined within a `@layer` directive.
    at Input.error (/snapshot/tailwindcss/node_modules/postcss/lib/input.js:148:16)
    at AtRule.error (/snapshot/tailwindcss/node_modules/postcss/lib/node.js:60:32)
    at processApply (/snapshot/tailwindcss/lib/lib/expandApplyAtRules.js:380:29)
    at /snapshot/tailwindcss/lib/lib/expandApplyAtRules.js:551:9
    at /snapshot/tailwindcss/lib/processTailwindFeatures.js:55:50
    at async Object.Once (/snapshot/tailwindcss/lib/cli/build/plugin.js:243:17)
    at async LazyResult.runAsync (/snapshot/tailwindcss/node_modules/postcss/lib/lazy-result.js:396:11)
    at async Object.watch (/snapshot/tailwindcss/lib/cli/build/plugin.js:368:13)
    at async build (/snapshot/tailwindcss/lib/cli/build/index.js:47:9) {
  reason: 'The `bg-primary-600` class does not exist. If `bg-primary-600` is a custom class, make sure it is defined within a `@layer` directive.',
  file: '/Users/serguei/github/elixir/phoenix/calendlex/deps/petal_components/assets/default.css',
  source: '/* Container */\n' +
...

User elixir/erlang versions:

elixir 1.17.1-otp-27
erlang 27.0
belgoros commented 2 months ago

My bad, there was a duplicate colors declaration in the tailwind.config.js, will close it.