CODEWITHSUNDEEP
sasselixirphoenix-frameworkbrunchtailwind-css
Michael Fich
Michael Fich

Reputation: 506

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.

Upvotes: 3

Views: 748

Answers (2)

EQuimper
EQuimper

Reputation: 5929

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;

Upvotes: 5

Nicky Woolf
Nicky Woolf

Reputation: 101

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

Upvotes: 4

Related Questions