How to setup TailwindCSS in Phoenix 1.4

I've been using Tailwind lately and really loved it. But one thing about this one is how to install it in a new project. My last personal project was with the brand new Phoenix 1.4 framework and I did want to use Tailwind for this one. So here just a "How to" guide about installing this one.

I did this article, cause I did search for this kind of one in the net and didn't found anything. So I hope that can help someone who tries it :)

Step 1 - Setup the Project

First, make sure you have the new version of Phoenix install on your machine. Just follow all the step on the docs here. After we need to start a brand new project. We can do this by running the command

1 mix phx.new myproject

Don't forget to say yes when they ask about installing the dependencies.

Step 2 - Install Tailwind

1 cd assets

So now we are in the front-end side, we can then install tailwind as a npm dev packages

1 yarn add -D tailwindcss

Now Tailwind is installed and ready. But we need to initialize it to get the basic theme etc.

From the terminal run the command

1 ./node_modules/.bin/tailwind init

This command will create a tailwind.js file who contains all the CSS of your project. Here I don't go in details about Tailwind you should read about it here

Step 3 - Setup Webpack etc...

Now we need to setup webpack to make it work with Tailwind + Postcss

1 yarn add -D postcss-loader

This will add Postcss as dev dependencies and will be available for webpack.

Create a file in the assets folder call postcss.config.js and add this code

1 2 3 module . exports = { 4 plugins : [ require ( 'tailwindcss' ) ( './tailwind.js' ) , require ( 'autoprefixer' ) ] , 5 }

This will setup Tailwind with the file we have created when we run ./node_modules/.bin/tailwind init . Also here I just add the autoprefixer but not required.

After this open you webpack.config.js file and add postcss-loader after the css-loader in the module object.

1 2 3 const path = require ( 'path' ) ; 4 const glob = require ( 'glob' ) ; 5 const MiniCssExtractPlugin = require ( 'mini-css-extract-plugin' ) ; 6 const UglifyJsPlugin = require ( 'uglifyjs-webpack-plugin' ) ; 7 const OptimizeCSSAssetsPlugin = require ( 'optimize-css-assets-webpack-plugin' ) ; 8 const CopyWebpackPlugin = require ( 'copy-webpack-plugin' ) ; 9 10 module . exports = ( env , options ) => ( { 11 optimization : { 12 minimizer : [ 13 new UglifyJsPlugin ( { cache : true , parallel : true , sourceMap : false } ) , 14 new OptimizeCSSAssetsPlugin ( { } ) , 15 ] , 16 } , 17 entry : { 18 './js/app.js' : [ './js/app.js' ] . concat ( glob . sync ( './vendor/**/*.js' ) ) , 19 } , 20 output : { 21 filename : 'app.js' , 22 path : path . resolve ( __dirname , '../priv/static/js' ) , 23 } , 24 module : { 25 rules : [ 26 { 27 test : /\.js$/ , 28 exclude : /node_modules/ , 29 use : { 30 loader : 'babel-loader' , 31 } , 32 } , 33 { 34 test : /\.css$/ , 35 use : [ MiniCssExtractPlugin . loader , 'css-loader' , 'postcss-loader' ] 36 } , 37 ] , 38 } , 39 plugins : [ 40 new MiniCssExtractPlugin ( { filename : '../css/app.css' } ) , 41 new CopyWebpackPlugin ( [ { from : 'static/' , to : '../' } ] ) , 42 ] , 43 } ) ;

Open your assets/css/app.css and override the code for this

1 2 3 4 5 6 7 8 9 10 11 12 13 14 @tailwind preflight ; 15 16 17 18 19 20 21 22 23 @tailwind components ; 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 @tailwind utilities ; 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64

Step 4 - Time to code

Now after you run mix phx.server from the ROOT directory of your project, you can then see the result inside your priv/static/css/app.css . All the TailwindCSS will be there.

End word

I hope this article make your life a bit easier and now you are able to go and build your awesome project with Tailwind and Phoenix :)