Question

我无法确定如何添加npm软件包，这些软件包并非专门用于早午餐，而是用于我的elixir / phoenix项目。

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

如果有人知道如何在Phoenix应用程序中正确配置Brunch以使用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部门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;

Answer 2

包括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

用早午餐将TailwindCSS添加到凤凰城

2 个答案: