/phx_scaffold_bulma_tailwind

Elixir Phoenix LiveView 1.6 - Scaffold to Bulma and Tailwind CSS Libraries

Primary LanguageElixirMIT LicenseMIT

Elixir Phoenix LiveView 1.6 Bulma and Tailwind CSS

This project is scaffold bulma and tailwind boilerplate code to project Elixir Phoenix ~> 1.6 that now uses esbuild.

Thanks to fly.io

Running

To start your Phoenix server:

  • Install dependencies with mix deps.get
  • Start Phoenix endpoint with mix phx.server or inside IEx with iex -S mix phx.server

Now you can visit localhost:4000 from your browser.

Testing

Production

Ready to run in production? Please check our deployment guides.

NOW => How this project was made :D

  • Creating mix phx.new phx_scaffold_bulma_tailwind --live --no-ecto
  • Install and configure dart_css.
  • Install and configure bulma.
  • Install and configure tailwind
  • Configure mix.exs
  • Configure dev.exs

Follow complete steps:

1. Creating Phoenix 1.6 LiveView project

mix phx.new phx_scaffold_bulma_tailwind --live --no-ecto

2. Install dart_css

Follow instructions here.

3. Install bulma

npm i -D --prefix assets bulma

Import bulma.sass file into css/app.scss with:

@import "../node_modules/bulma/bulma.sass";

4. Install tailwindcss

npm i -D --prefix assets tailwindcss autoprefixer postcss postcss-loader

Create file assets/tailwind.config.js with:

module.exports = {
  content: [
    "../lib/**/*.html.eex",
    "../lib/**/*.html.leex",
    "../lib/**/*.html.heex",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Create file assets/postcss.config.js with:

module.exports = {
    plugins: {
        tailwindcss: {},
        autoprefixer: {}
    }
}

Create file assets/css/tailwind.css with:

/* This file is for your main application CSS */
@tailwind base;
@tailwind components;
@tailwind utilities;

Import css/tailwind.css into assets/css/app.scss after css styles:

Here is last line of the file

@import "./tailwind.css";

Includes script into package.json with:

  "scripts": {
    "tailwind": "NODE_ENV=production tailwindcss --postcss --minify --input=css/tailwind.css --output=../priv/static/assets/tailwind.css"
  },

Configure mix.exs into function aliases with:

  #     $ mix setup
  #
  # See the documentation for `Mix` for more info on aliases.
  defp aliases do
    [
      setup: ["deps.get"],
      "assets.deploy": [
        "cmd --cd assets npm install",
        "cmd --cd assets npm run tailwind",
        "esbuild default --minify",
        "sass default --no-source-map --style=compressed",
        "phx.digest"
      ]
    ]
  end

Configure dev.exs into watchers with npx instructions:

# For development, we disable any cache and enable
# debugging and code reloading.
#
# The watchers configuration can be used to run external
# watchers to your application. For example, we use it
# with esbuild to bundle .js and .css sources.
config :fvideen_platform, FvideenPlatformWeb.Endpoint,
  # Binding to loopback ipv4 address prevents access from other machines.
  # Change to `ip: {0, 0, 0, 0}` to allow access from other machines.
  http: [ip: {127, 0, 0, 1}, port: 4000],
  check_origin: false,
  code_reloader: true,
  debug_errors: true,
  secret_key_base: "q8icUmJfcHI8LF9Ajh+WKBaIXlxER5k7Hdwu845pJO45MBjL8eg5bJ8o9cJyverv",
  watchers: [
    # Start the esbuild watcher by calling Esbuild.install_and_run(:default, args)
    npx: [
      "tailwindcss",
      "--input=css/tailwind.css",
      "--output=../priv/static/assets/tailwind.css",
      "--postcss",
      "--watch",
      cd: Path.expand("../assets", __DIR__)
    ],
    esbuild: {
      Esbuild, 
      :install_and_run, 
      [:default, ~w(--sourcemap=inline --watch)]
    },
    sass: {
      DartSass,
      :install_and_run,
      [:default, ~w(--embed-source-map --source-map-urls=absolute --watch)]}
  ]

Problems with Phoenix Tailwind Library

I have problems working with phoenix tailwind library and dart_css library.

After mix phx.server command any style can take in pages *.html.heex. Both pages with bulma.io and tailwindcss not works and console print errors into assets.

I hope soon create a branch with phoenixframework tailwind, dart_sass and bulmacss to show this issue.

Sorry my english I am brazilian :) Thanks for all community free software foundation and opensource I love it :D

Learn more