Add TailwindCSS to Phoenix with Brunch

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

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