Tailwind CSS: Getting Set Up in Minutes

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.

While we’re going to use it only to compile CSS here, it can do so much more. Check out my previous article and the official documentation.

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

"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

npm install tailwindcss
npx tailwind init

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

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

Step 3: Configure Laravel Mix

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

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:

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.

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:

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 appeared first on Stephen AfamO's Blog.