kevinlang
Phx_gen_tailwind - easily add Tailwind to a new Phoenix 1.6+ project
Hey all,
I created a phx.gen.tailwind Mix task that adds Node + TailwindCSS to a new Phoenix project. Essentially, it does the following steps for you:
- Copy over a
package.jsonfile into yourassets/directory withtailwindcssas a dev dependency - Copy over a sane default
tailwind.config.jsto yourassets/directory - Modifies your
assets/js/app.jsfile to no longer import CSS, since we are not using ESBuild for CSS processing - Modifies your
assets/css/app.cssfile to import TailwindCSS and no longer importphoenix.css - Updates the aliases in your
mix.exsfile - Prompts to install your new NPM dependencies (tailwindcss)
Pretty much based on the PR by José.
Cheers,
Kevin
Most Liked
ambareesha7
hey thank you for your work 
is it possible to add more mix commands to your library for different CSS frameworks
let’s say,
project A i wanted to add TailwindCSS
project B i wanted to add BulmaCSS,
project C i wanted to add BootstrapCSS … etc
Popular in Libraries
Other popular topics
Latest Phoenix Threads
Latest on Elixir Forum
Sponsor Spotlight
We build reliable cloud platforms for business-critical systems.
Categories:
Sub Categories:
Forums
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.
Practical resources that improve the lives of professional developers.
Enabling companies to succeed by building software people love.
The deployment platform built for Elixir: PaaS ease, VPS control.
Courses that'll move you from confusion to "Aha, now I get it!"