我无法弄清楚如何将不是专门为与早午餐一起使用而构建的 npm 包添加到我的 elixir/phoenix 项目中。
我不想做的一件事是手动将文件从 node_modules/ 复制到 vendor/。
如果有人知道如何正确配置 Brunch 以在 Phoenix 应用程序中使用 Tailwind，我们将不胜感激。
【问题讨论】：
标签： sass elixir phoenix-framework brunch tailwind-css
包括 postcss-brunch 和 tailwindcss 包
$ npm install postcss-brunch tailwindcss --save-dev
创建 Tailwind 配置文件（在 assets 目录中）
$ ./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;
【讨论】：
对于 Phoenix 1.4，我写了一篇关于如何设置它的博文。 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 depyarn 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;
【讨论】：