使用 Brunch 将 TailwindCSS 添加到 Phoenix

Question

我无法弄清楚如何将不是专门构建用于早午餐的 npm 包添加到我的 elixir/phoenix 项目中。

我不想做的一件事是手动将文件从 node_modules/ 复制到 vendor/。

如果有人知道如何正确配置 Brunch 以在 Phoenix 应用程序中使用 Tailwind，我们将不胜感激。

Answer 1

包括 postcss-brunch 和 tailwindcss 包

$ npm install postcss-brunch tailwindcss --save-dev

创建 Tailwind 配置文件（在资产目录中）

$ ./node_modules/.bin/tailwindcss init

将 Tailwind 添加为 postcss 插件

assets/brunch-config.js

...

// Configure your plugins
plugins: {
  babel: {
    // Do not use ES6 compiler in vendor code
    ignore: [/vendor/]
  },
  postcss: {
    processors: [
      require('tailwindcss')('./tailwind.js')
    ]
  }
},

...

在 css

中使用 Tailwind

assets/css/app.css

@tailwind preflight;
@tailwind utilities;

https://tailwindcss.com/docs/installation

Answer 2

对于 Phoenix 1.4，我已经写了一篇博客 post 介绍如何设置它。 https://equimper.com/blog/how-to-setup-tailwindcss-in-phoenix-1.4 这是使用 webpack 和 postcss

创建项目mix phx.new myproject

进入你的资产cd assets

添加顺风依赖项yarn add -D tailwindcss

初始化顺风主题./node_modules/.bin/tailwind init

添加 postcss dep yarn add -D postcss-loader

在 /assets 中创建一个文件调用 postcss-config.js 并添加此代码

module.exports = {
  plugins: [require('tailwindcss')('./tailwind.js'), require('autoprefixer')],
}

在你的 webpack 配置中更改

use: [MiniCssExtractPlugin.loader, 'css-loader']

对于

use: [MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader']

最后在你的 app.css 文件中添加那些顺风的东西

@tailwind preflight;
@tailwind components;
@tailwind utilities;

使用 Brunch 将 TailwindCSS 添加到 Phoenix

Add TailwindCSS to Phoenix with Brunch

sass

elixir

phoenix-framework

brunch

tailwind-css