How to setup TailwindCSS in Phoenix 1.4

November 14, 2018 • 1 minute to read

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

1mix phx.new myproject

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

Step 2 - Install Tailwind

1cd assets

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

1yarn 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

1yarn 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// assets/postcss.config.js
2
3module.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// assets/webpack.config.js
2
3const path = require('path');
4const glob = require('glob');
5const MiniCssExtractPlugin = require('mini-css-extract-plugin');
6const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
7const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
8const CopyWebpackPlugin = require('copy-webpack-plugin');
9
10module.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/** assets/css/app.css */
2
3/**
4 * This injects Tailwind's base styles, which is a combination of
5 * Normalize.css and some additional base styles.
6 *
7 * You can see the styles here:
8 * https://github.com/tailwindcss/tailwindcss/blob/master/css/preflight.css
9 *
10 * If using `postcss-import`, use this import instead:
11 *
12 * @import "tailwindcss/preflight";
13 */
14 @tailwind preflight;
15
16 /**
17  * This injects any component classes registered by plugins.
18  *
19  * If using `postcss-import`, use this import instead:
20  *
21  * @import "tailwindcss/components";
22  */
23 @tailwind components;
24
25 /**
26  * Here you would add any of your custom component classes; stuff that you'd
27  * want loaded *before* the utilities so that the utilities could still
28  * override them.
29  *
30  * Example:
31  *
32  * .btn { ... }
33  * .form-input { ... }
34  *
35  * Or if using a preprocessor or `postcss-import`:
36  *
37  * @import "components/buttons";
38  * @import "components/forms";
39  */
40
41 /**
42  * This injects all of Tailwind's utility classes, generated based on your
43  * config file.
44  *
45  * If using `postcss-import`, use this import instead:
46  *
47  * @import "tailwindcss/utilities";
48  */
49 @tailwind utilities;
50
51 /**
52  * Here you would add any custom utilities you need that don't come out of the
53  * box with Tailwind.
54  *
55  * Example :
56  *
57  * .bg-pattern-graph-paper { ... }
58  * .skew-45 { ... }
59  *
60  * Or if using a preprocessor or `postcss-import`:
61  *
62  * @import "utilities/background-patterns";
63  * @import "utilities/skew-transforms";
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 :)

How to setup TailwindCSS in Phoenix 1.4

Step 1 - Setup the Project

Step 2 - Install Tailwind

Step 3 - Setup Webpack etc...

Step 4 - Time to code

End word

Previous

Next

Join my Newsletter

Comments