Tailwind CSS: Getting Set Up in Minutes
Tags: tailwind, css, laravelmix
Published: 2019-07-09 21:16:19

---
title: Tailwind CSS: Getting Set Up in Minutes
published: true
tags: tailwind,css,laravel-mix
canonical_url: https://stephenafamo.com/blog/tailwind-css-getting-set-up-in-minutes/
---

 ![Tailwind CSS Logo](https://i2.wp.com/stephenafamo.com/blog/wp-content/uploads/2019/07/Tailwind-CSS.jpg?fit=1500%2C750&ssl=1 "Tailwind CSS")

Tailwind CSS is a great CSS framework. Utility first, fully customizable and just a pleasure to use.

I had been seeing it around and wanted to try it myself, however the set up instructions can feel a bit tedious, especially if you’re not familiar with all the front-end build tools and CSS preprocessors.

So, after going through it myself, I decided to write a guide on the fastest way to set up Tailwind CSS.

## Prerequisites

- Node
- NPM

## Assumptions

- You are familiar with working from the command line
- All commands are run from the root of the project
- Our main CSS file is at `src/css/app.css`
- We want our compiled file to be at `build/css/app.css`

## Step 1: Install Laravel Mix

Laravel Mix is a great tool that **greatly** simplifies webpack configuration. I have written a previous article on it [here](https://dev.to/stephenafamo/using-laravel-mix-with-webpack-for-all-your-assets-31fp-temp-slug-2499234).

While we’re going to use it only to compile CSS here, it can do so much more. Check out my [previous article](https://dev.to/stephenafamo/using-laravel-mix-with-webpack-for-all-your-assets-31fp-temp-slug-2499234) and the [official documentation](https://laravel-mix.com/docs/4.0/installation).

```console
npm init -y
npm install laravel-mix --save-dev
cp node_modules/laravel-mix/setup/webpack.mix.js ./
```

We also need to add some scripts to our `package.json`

```js
"scripts": {
    "dev": "NODE_ENV=development webpack --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
    "watch": "NODE_ENV=development webpack --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
    "hot": "NODE_ENV=development webpack-dev-server --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
    "production": "NODE_ENV=production webpack --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
}
```

## Step 2: Install and Configure Tailwind CSS

Now we install Tailwind

```bash
npm install tailwindcss
npx tailwind init
```

Next, we’ll edit our `src/css/app.css` file to add tailwind:

```sass
@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";
```

## Step 3: Configure Laravel Mix

We will now edit `webpack.mix.js` to the following:

```js
let mix = require('laravel-mix');
mix.postCss('src/css/app.css', 'build/css', [
    require('postcss-import'), // So we can use @import statements
    require('tailwindcss'),
    require('autoprefixer'), // to add prefixes like --webkit
]);
```

We’re using two other PostCSS plugins: `postcss-import` and `autoprefixer`. And our Tailwind CSS

## Step 4: Compile our CSS

To compile our CSS, we have several options:

- To build the CSS in “development” mode: `npm run dev`
- To build in _development_ mode **and** watch for changes: `npm run watch`
- To build for _production_: `npm run production`

Building in development mode skips a couple things like minification. Makes the builds faster, and makes it easier to debug.

While developing, I just run `npm run watch` and code away!

## Step 5: Minimizing File Size (Optional)

The main Tailwind CSS compiled file is relatively big.

Before using in production, we are advised to remove unused CSS.

### Version 1.4+

We can do this by adding a custom configuration file. We place this at `./tailwind.config.js`. It should look like this:

```js
module.exports = {
    theme: {},
    // Specify the paths to all of the template files in your project
    purge: [
        '../templates/*.html',
        './templates/*.vue',
        './templates/*.jsx',
    ],
    variants: {}
}
```

When we build our CSS for production by running `npm run production`, all unused CSS classes will be purged giving us a much smaller final file size.

### Version 1.3 and earlier

We can do this with a PostCSS plugin called Purgecss. There is a more detailed article about this in the Tailwind CSS [documentation](https://tailwindcss.com/docs/controlling-file-size).

To add Purgecss to our Laravel Mix configuration is pretty straightforward:

First, we install Purgecss

```
npm install @fullhuman/postcss-purgecss --save-dev
```

Next we add modify our `webpack.mix.js` to look like this:

```js
const purgecss = require('@fullhuman/postcss-purgecss')({
    // Specify the paths to all of the template files in your project
    content: [
        './templates/\*.html',
        './templates/\*.vue',
        './templates/\*.jsx',
    ],
    // Include any special characters you're using in this regular expression
    defaultExtractor: content => content.match(/[A-Za-z0-9-\_:/]+/g) || [] })

let mix = require('laravel-mix');
mix.postCss('src/css/app.css', 'build/css', [
    require('postcss-import'), // So we can use @import statements
    require('tailwindcss'),
    require('autoprefixer'), // to add prefixes like --webkit
    ...process.env.NODE\_ENV === 'production'? [purgecss] : [] // Purge only in production
]);
```

## Conclusion

Tailwind CSS can seem pretty tedious to set up, but using Laravel Mix, it can become a pretty straightforward process. Following the above steps should get you up and running in minutes.

Let me know any questions, or extra tips you may have in the comments section.

The post [Tailwind CSS: Getting Set Up in Minutes](https://stephenafamo.com/blog/tailwind-css-getting-set-up-in-minutes/) appeared first on [Stephen AfamO's Blog](https://stephenafamo.com/blog).