通过早午餐将 TailwindCSS 添加到 Phoenix

Question

我无法弄清楚如何将 npm 包添加到我的 elixir/phoenix 项目中，这些包不是专门为与 brunch 一起使用而构建的。

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

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

Answer 1

对于 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;