2

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

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

如果有人知道如何正确配置早午餐以在 Phoenix 应用程序中使用 Tailwind，任何帮助将不胜感激。

4

2 回答 2

4

对于 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;
于 2018-11-29T18:49:05.813 回答
3

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

https://tailwindcss.com/docs/installation

于 2018-02-27T04:20:33.833 回答