search

petalframework / petal_boilerplate

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

Update deps Petal components 0.9.0 #3

Closed cohawk closed 2 years ago

cohawk commented 2 years ago

Fresh template install currently gives a compilation error when using the .card Petal component

== Compilation error in file lib/inventory_web/views/page_view.ex ==
** (CompileError) lib/inventory_web/templates/page/index.html.heex:753: undefined function card/1 (expected InventoryWeb.PageView to define such a function or for it to be imported, but none are available)

Fixed updating mix.deps 

{:petal_components, "~> 0.9.0"}

FYI also seems to be a CSS error with all the .card dark @layer components, but might be something I missed on setup

CssSyntaxError: tailwindcss: PETAL/assets/css/app.css:8:5: The `dark:border-gray-300` class does not exist. If `dark:border-gray-300` is a custom class, make sure it is defined within a `@layer` directive.
cohawk commented 2 years ago

FYI boilerplate compiles now after updating deps {:petal_components, "~> 0.9.0"} & tailwind elixir & alpine versions in commit https://github.com/petalframework/petal_boilerplate/commit/a11158271d333a1793fe202c9cfd8f8c5c7a498b

pulling in AlpineJS via CDN is not my preferred, but it does remove need for node_modules. Remember if adding AlpineJS via a module will need to update config/config.exs config :esbuild, --target=es2016 to `es2017'+ as reported https://github.com/phoenixframework/phoenix/issues/4579#issuecomment-963955963

still need to update mix.exs to remove "cmd --cd assets npm install" from mix setup - or update README instructions, since moving to https://github.com/phoenixframework/tailwind and removing need for npm / node_modules

lastly the dark mode does not appear to currently work unless I added <body class="dark:bg-gray-900"> to layout/root.html.heex

thanks for providing the boilerplate BTW

mplatts commented 2 years ago

Sorry for the slow reply. Thanks @cohawk I pushed up the es2017 target and fixed mix setup.

Currently if your OS is in dark mode and you add dark:something to your codebase then it'll apply instantly. Otherwise if you're in light mode and want to test dark mode you will need to change tailwind.config.js:

module.exports = {
  darkMode: 'class',
  // ...
}

And then add the class "dark" to your body element. Although dark mode for petal_components is still a WIP for the moment - not all components will work with it - should be done soon.

cohawk commented 2 years ago

No worries @mplatts. I kinda felt bad for polluting your zero issues tracker for my weekend PETAL prototype with something you updated 10 hours later with the standalone tailwindcss phoenix installer.

Thanks for the dark mode explain - Im still learning my way around tailwind and since I found your petal_components have been referencing it nonstop.

mplatts commented 2 years ago

Na don't feel bad - I'd prefer the feedback over zero issues! I'm pretty new to open source so it's handy having other people chip in and give feedback/guidance.

Glad you're getting into Tailwind - I think it's great.