18 在 Phoenix 1.6 安装 tailwindcss

这一篇可能满好用的

安装 Tailwind

这边建议稍微看一次 Tailwind 官网的安装说明会比较知道在干嘛，好拉也可以不用看

phoenix 的 javascript 与 css 之类的静态 assets 都放在 assets 资料夹这层
所以我们 cd assets

我们要装 tailwindcss, postcss, autoprefixer, postcss-import

npm install -D tailwindcss@latest postcss@latest autoprefixer@latest postcss-import@latest

再照着下面设定 postcss 的设定，开一个 postcss.config.js 并输入以下

module.exports = {
  plugins: {
    "postcss-import": {},
    tailwindcss: {},
    autoprefixer: {},
  }
}

tailwind的设定档贴心多了
只要在终端机输入 npx tailwindcss init 就会自动帮我们产，
阿但是还是要改一下让他符合 phoenix 放档案的位置

module.exports = {
  mode: 'jit',
  purge: [
    './js/**/*.js',
    '../lib/*_web/**/*.*ex'
  ],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

改到的主要是

启动超赞的 jit 模式 (好拉就变很快，详细)
purge 的时候要查看的档案 '../lib/*_web/**/*.*ex' './js/**/*.js'
这两个可以让我们让他去扫我们所有有机会会写到 tailwind class 的地方，这个看使用情况可以扩增需要的路径

接着我们要把 tailwindcss import 进我们的 css 里面
打开 assets/css/app.css
我们会看到三大项，

/* This file is for your main application CSS */
@import "./phoenix.css";

/* Alerts and form errors used by phx.new */
.alert {
  padding: 15px;
/* 下略

/* LiveView specific classes for your customization */
.phx-no-feedback.invalid-feedback,
.phx-no-feedback .invalid-feedback {
  display: none;
}
/* 下略

第二项是 alerts之类的造型，可以不用现在改，之後有空想要换成用 tailwind 写的时候再删
第三项是 liveview 相关的，可能是需要改的时候再改，我是还没有改过拉

第一项是为了让你 phx.new 的时候不用调整 css 也可以有稍微可以看的超精简版 css 微框架
我们这次要把它拿掉换成 tailwind
把它拿掉换成这三行

@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

接着我们要打开 assets/js/app.js 档案他里面写

// We import the CSS which is extracted to its own file by esbuild.
// Remove this line if you add a your own CSS build pipeline (e.g postcss).
import "../css/app.css"

原本的 css 是给 esbuild 包，但我们现在用postcss所以要把段拿掉，或注解掉

// import "../css/app.css"

这样严格来说是装了，但是还是要加一些来符合我们开发与部属的需求

开发部分的调整

我们打开 config/dev.exs ，在config下面有一个 watcher: []
目前里面已经有 esbuild 会在我们改 js 的时候重新 compile
我们要在里面加上 tailwind cli

变成这样

  watchers: [
    # Start the esbuild watcher by calling Esbuild.install_and_run(:default, args)
    esbuild: {Esbuild, :install_and_run, [:default, ~w(--sourcemap=inline --watch)]},
    npx: [
      "tailwindcss",
      "--input=css/app.css",
      "--output=../priv/static/assets/app.css",
      "--postcss",
      "--watch",
      cd: Path.expand("../assets", __DIR__)
    ]
  ]

加 npx 的时候记得要帮前一行加 ,

是部署的情况

我们在 assets/package.json 加一个部署用的打包 script

{
  "devDependencies": {
    "autoprefixer": "^10.3.6",
    "postcss": "^8.3.8",
    "tailwindcss": "^2.2.16"
  },
  "scripts": {
    "deploy": "NODE_ENV=production tailwindcss --postcss --minify -i css/app.css -o ../priv/static/assets/app.css"
  }
}

接着我们把这段加在部署会执行的包assets步骤里面
打开 mix.exs，
会看到最後面 aliases 方法内原本是

  [
    setup: ["deps.get"], # 有用 ecto 的专案这里还会有一个 "ecto.setup"
    "assets.deploy": ["esbuild default --minify", "phx.digest"]
  ]

帮他在 setup 加上 npm install
在 assets.deploy 加上刚刚的 script ，变成

  [
    setup: ["deps.get", "cmd --cd assets npm install"],
    "assets.deploy": [
      "cmd --cd assets npm run deploy",
      "esbuild default --minify",
      "phx.digest"
    ]
  ]

这次真的装好了

因为我常常不认识昨天的自己，所以更新一下 Readme.md 好了
在 To start your Phoenix server 里面要多一个步骤

* Install Node.js dependencies with `npm install` inside the `assets` directory

试试看

弄好之後打开看看会看到原本 phoenix 给基本造型的被我们拿掉之後
整个变得面目全非。不怕，我们本来就要把原本的删掉。
今天我们就加个底色证明一下我们的 tailwindcss 会动了
我们打开昨天做的计数器 lib/card_web/live/page_live/index.ex

帮他上个造型
编辑一下 render 方法的 ~H 里面

<div class="p-10 w-96">
  <h1 class="text-3xl m-4 text-center">我的第 n 个计数器</h1>
  <div class="border border-gray-300 p-4 m-4 rounded-lg">
    <h2 class="bg-gray-200 rounded-lg p-1 px-2 text-right"><%= @number %></h2>
    <div class="grid grid-cols-3 gap-4 mt-4">
      <button phx-click="加一" class="bg-green-100 rounded-lg">加一</button>
      <button phx-click="减一" class="bg-red-100 rounded-lg">减一</button>
      <button phx-click="归零" class="bg-blue-100 rounded-lg">归零</button>
    </div>
  </div>
</div>