Packages

phx_new

1.8.1
1.8.9 1.8.8 1.8.7 1.8.6 1.8.5 1.8.4 1.8.3 1.8.2 1.8.1 1.8.0 1.8.0-rc.4 1.8.0-rc.3 1.8.0-rc.2 1.8.0-rc.1 1.8.0-rc.0 1.7.24 1.7.23 1.7.22 1.7.21 1.7.20 1.7.19 1.7.18 1.7.17 1.7.16 1.7.15 1.7.14 1.7.13 1.7.12 1.7.11 1.7.10 1.7.9 1.7.8 1.7.7 1.7.6 1.7.5 1.7.4 1.7.3 1.7.2 1.7.1 1.7.0 1.7.0-rc.3 1.7.0-rc.2 1.7.0-rc.1 1.7.0-rc.0 1.6.17 1.6.16 1.6.15 1.6.14 1.6.13 1.6.12 1.6.11 1.6.10 1.6.9 1.6.8 1.6.7 1.6.6 1.6.5 1.6.4 1.6.3 1.6.2 1.6.1 1.6.0 1.6.0-rc.1 1.6.0-rc.0 1.5.15 1.5.14 1.5.13 1.5.12 1.5.11 1.5.10 1.5.9 1.5.8 1.5.7 1.5.6 1.5.5 1.5.4 1.5.3 1.5.2 1.5.1 1.5.0 1.5.0-rc.0 1.4.18 1.4.17 1.4.16 1.4.15 1.4.14 1.4.13 1.4.12 1.4.11 1.4.10 1.4.9 1.4.8 1.4.7 1.4.6 1.4.5 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0 1.4.0-rc.3 1.4.0-rc.2 1.4.0-rc.1 1.4.0-rc.0 1.4.0-dev.0 1.3.5

Phoenix framework project generator. Provides a `mix phx.new` task to bootstrap a new Elixir application with Phoenix dependencies.

HexDocs

Current section

Files

Jump to
Readme
106 Versions
0 Dependencies
5 Dependants
Files
Activity
phx_new templates usage-rules assets.md
Raw

templates/usage-rules/assets.md 

### JS and CSS guidelines



- **Use Tailwind CSS classes and custom CSS rules** to create polished, responsive, and visually stunning interfaces.

- Tailwindcss v4 **no longer needs a tailwind.config.js** and uses a new import syntax in `app.css`:



      @import "tailwindcss" source(none);

      @source "../css";

      @source "../js";

      @source "../../lib/my_app_web";



- **Always use and maintain this import syntax** in the app.css file for projects generated with `phx.new`

- **Never** use `@apply` when writing raw css

- **Always** manually write your own tailwind-based components instead of using daisyUI for a unique, world-class design

- Out of the box **only the app.js and app.css bundles are supported**

  - You cannot reference an external vendor'd script `src` or link `href` in the layouts

  - You must import the vendor deps into app.js and app.css to use them

  - **Never write inline <script>custom js</script> tags within templates**



### UI/UX & design guidelines



- **Produce world-class UI designs** with a focus on usability, aesthetics, and modern design principles

- Implement **subtle micro-interactions** (e.g., button hover effects, and smooth transitions)

- Ensure **clean typography, spacing, and layout balance** for a refined, premium look

- Focus on **delightful details** like hover effects, loading states, and smooth page transitions