Phoenix + Tailwind + Petal Components Boilerplate
175
stars
192
commits
Elixir
primary language
Jul 28, 2026
updated
A clean install of the Phoenix 1.7 (RC) along with:
node_modulesOptionally change your database name in dev.exs.
mix setupmix phx.server or inside IEx with iex -S mix phx.serverlocalhost:4000 from your browser.The CRUD generators (eg. mix phx.gen.live) will produce code that doesn't quite work. Basically, they will use components defined in core_components.ex that we have renamed due to naming clashes with Petal Components.
To fix, simply do a find and replace in the generated code:
Replace `.modal` with `.phx_modal`
Replace `.table` with `.phx_table`
Replace `.button` with `.phx_button`
This should make it work but it'll be using a different style of buttons/tables/modal to Petal Components. To work with Petal Components you will need to replace all buttons/tables/modal with the Petal Component versions.
Petal Pro currently comes with a generator to build CRUD interfaces with Petal Components. You can purchase it here.
Run mix rename PetalBoilerplate YourNewName to rename your project. You can then remove {:rename_project, "~> 0.1.0", only: :dev} from your mix.exs file.
Elixir
47.8%
HTML
46.0%
JavaScript
2.5%
CSS
2.5%
Dockerfile
1.3%
Phoenix + Tailwind + Petal Components Boilerplate
175
stars
192
commits
Elixir
primary language
Jul 28, 2026
updated
A clean install of the Phoenix 1.7 (RC) along with:
node_modulesOptionally change your database name in dev.exs.
mix setupmix phx.server or inside IEx with iex -S mix phx.serverlocalhost:4000 from your browser.The CRUD generators (eg. mix phx.gen.live) will produce code that doesn't quite work. Basically, they will use components defined in core_components.ex that we have renamed due to naming clashes with Petal Components.
To fix, simply do a find and replace in the generated code:
Replace `.modal` with `.phx_modal`
Replace `.table` with `.phx_table`
Replace `.button` with `.phx_button`
This should make it work but it'll be using a different style of buttons/tables/modal to Petal Components. To work with Petal Components you will need to replace all buttons/tables/modal with the Petal Component versions.
Petal Pro currently comes with a generator to build CRUD interfaces with Petal Components. You can purchase it here.
Run mix rename PetalBoilerplate YourNewName to rename your project. You can then remove {:rename_project, "~> 0.1.0", only: :dev} from your mix.exs file.
Elixir
47.8%
HTML
46.0%
JavaScript
2.5%
CSS
2.5%
Dockerfile
1.3%