sasselixirphoenix-frameworkbrunchtailwind-css

Add TailwindCSS to Phoenix with Brunch


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.


Solution

  • 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