sass - 使用早午餐将TailwindCSS添加到Phoenix

我在弄清楚如何向我的elixir / phoenix项目中添加不是专门为与早午餐搭配使用的npm软件包而遇到麻烦。

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

如果有人知道如何正确配置Brunch以在Phoenix应用程序中使用Tailwind，将非常感谢您的帮助。

最佳答案

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

关于sass - 使用早午餐将TailwindCSS添加到Phoenix，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/48654765/