Add TailwindCSS to Phoenix with Brunch - sass

Question

I'm having trouble figuring out how to add npm packages which are not specifically built to be used with brunch to my elixir/phoenix project.
One thing I don't want to do is manually copy files from node_modules/ to vendor/.
If anyone knows how to properly configure Brunch to use Tailwind in a Phoenix app, any help would be greatly appreciated.

Answer 1

For Phoenix 1.4 I've made a blog post about how you can setup it. https://equimper.com/blog/how-to-setup-tailwindcss-in-phoenix-1.4 This is using webpack and postcss
Create project mix phx.new myproject
Go in your assets cd assets
Add tailwind dependencies yarn add -D tailwindcss
Init tailwind theme ./node_modules/.bin/tailwind init
Add postcss dep yarn add -D postcss-loader
Create a file in /assets call postcss-config.js and add this code
module.exports = {
plugins: [require('tailwindcss')('./tailwind.js'), require('autoprefixer')],
}
Inside your webpack config change
use: [MiniCssExtractPlugin.loader, 'css-loader']
for
use: [MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader']
Finally add those tailwind stuff in your app.css file
#tailwind preflight;
#tailwind components;
#tailwind utilities;

Answer 2

Include postcss-brunch and tailwindcss packages
$ npm install postcss-brunch tailwindcss --save-dev
Create Tailwind config file (in assets directory)
$ ./node_modules/.bin/tailwindcss init
Add Tailwind as postcss plugin
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')
]
}
},
...
Use Tailwind in css
assets/css/app.css
#tailwind preflight;
#tailwind utilities;
https://tailwindcss.com/docs/installation