ant
How to apply CSS to Phoenix 1.7.14 app
I installed elixir 1.17.2-otp-27 using asdf on WSL.
I intalled Phoenix 1.7.14.
And I created a Phoenix project with the “phx.new my_app” command.
When I run the Phoenix app with the “mix phx.server” command, the CSS is not applied.
In the ‘priv/static/assets’ folder, there is only an ‘app.js’ file and no ‘app.css’ file.
I’m wondering how to apply CSS to my Phoenix app.
Most Liked
ant
I solved the problem in the following way.
-
Install node on WSL
-
Add a ‘package.json’ file to the ‘assets’ directory
{
"name": "my_app",
"version": "1.0.0",
"description": "",
"main": "js/app.js",
"scripts": {
"deploy": "NODE_ENV=production tailwindcss -o ../priv/static/assets/app.css"
},
"dependencies": {
"@tailwindcss/forms": "^0.5.7",
"tailwindcss": "^3.4.3"
}
}
-
Run the “npm install” command from the ‘assets’ directory.
-
Run the “npm run deploy” command from the ‘assets’ directory.
Popular in Questions
Other popular topics
Latest Phoenix Threads
Latest on Elixir Forum
Sponsor Spotlight
Producing high quality Elixir screencasts since 2017.
Categories:
Sub Categories:
Forums
Popular Tags
- #ecto
- #liveview
- #troubleshooting
- #learning-elixir
- #deployment
- #library
- #erlang
- #testing
- #genserver
- #mix
- #absinthe
- #remote-other
- #otp
- #plug
- #how-to-question
- #macros
- #postgres
- #channels
- #elixirconf
- #exunit
- #discussion
- #code-sync
- #javascript
- #podcasts
- #onsite
- #dialyzer
- #docker
- #authentication
- #umbrella
- #full-time-contract
- #podcasts-by-brainlid
- #ecto-query
- #elixir-ls
- #phoenix_html
- #iex
- #blog-post
- #graphql
- #genstage
- #ai
- #websockets
- #supervisor
- #advent-of-code
- #elixirconf-us
- #distillery
- #processes
- #forms
- #api
- #metaprogramming
- #security
- #performance
Our Sponsors
Build Elixir applications with speed and confidence.
Supporting innovation across the BEAM ecosystem.
We build reliable cloud platforms for business-critical systems.
Catch errors, track performance, monitor hosts and more.
Error tracking for Elixir devs who love to ship. Start your free account.
Practical resources that improve the lives of professional developers.
Producing high quality Elixir screencasts since 2017.
Enabling companies to succeed by building software people love.
The team behind Membrane, Popcorn, LiveDebugger. Available for hire.
Courses that'll move you from confusion to "Aha, now I get it!"