DEV Community

Chris Finnigan
Chris Finnigan

Posted on • Originally published at chrisfinnigan.com on

Setting Up Grunt and Tailwind CSS

Tailwind CSS has been getting a lot of love recently at meetups, conferences and from the Web Development Twitterati.

With a site re-skin on the horizon. I was keen to find out if I could use Tailwind CSS to move on from Bootstrap and build my own fully customised UI library.

What is this Tailwind CSS thing you speak of ?

"A utility-first CSS framework for rapidly building custom designs.

Tailwind CSS is a highly customizable, low-level CSS framework that gives you all of the building blocks you need to build bespoke designs without any annoying opinionated styles you have to fight to override."

Check them out at https://www.tailwindcss.com.

Why Grunt?

The site that I'll be re-skinning uses a series of Grunt tasks to compile CSS, JS, Minification etc. It's not the most modern of setups, but it still works great.

I was reading through Tailwind CSS' great documentation. Unfortunately, there didn't seem to be an example for setting up Grunt.

I love a build tool challenge, so with a fresh coffee and a couple of spare hours. I decided to work it out.

The guides provided for Gulp and Webpack etc pointed me in the right direction.

This is what you need to do.

1. Install the following packages

npm install tailwindcss --save-dev
Enter fullscreen mode Exit fullscreen mode
npm install grunt-postcss --save-dev
Enter fullscreen mode Exit fullscreen mode
npm install autoprefixer --save-dev
Enter fullscreen mode Exit fullscreen mode

2. Gruntfile.js configuration

module.exports = function (grunt) {
  grunt.initConfig({
    // get the configuration info from package.json
    pkg: grunt.file.readJSON('package.json'),

    // PostCSS - Tailwindcss and Autoprefixer
    postcss: {
      options: {
        map: true, // inline sourcemaps
        processors: [
          require('tailwindcss')(),
          require('autoprefixer')({ browsers: 'last 2 versions' }) // add vendor prefixes
        ]
      },
      dist: {
        expand: true,
        cwd: 'ui/src/tailwindcss/',
        src: ['**/*.css'],
        dest: 'ui/dist/tailwindcss/',
        ext: '.css'
      }
    },

    // Watch for changes and run Tasks
    watch: {
      postcss: {
        files: 'ui/src/tailwindcss/**/*.css',
        tasks: ['compile-tailwindcss'],
        options: {
          interrupt: true
        }
      }
    }
  })

  // Load Grunt Plugins
  grunt.loadNpmTasks('grunt-contrib-watch')
  grunt.loadNpmTasks('grunt-postcss')

  // Register Tasks
  grunt.registerTask('compile-tailwindcss', ['postcss'])

  // Resgiter Watcher Tasks
  grunt.registerTask('watch-tailwindcss', ['watch:postcss'])
}
Enter fullscreen mode Exit fullscreen mode

3. Create a tailwind.css file in your src directory

Add the following code to your tailwind.css file

@tailwind base;
@tailwind components;
@tailwind utilities;
Enter fullscreen mode Exit fullscreen mode

4. Compile Tailwind CSS

To manually compile your Tailwind CSS files:

    grunt compile-tailwindcss
Enter fullscreen mode Exit fullscreen mode

To compile your Tailwind CSS files on src changes:

   grunt watch-tailwindcss
Enter fullscreen mode Exit fullscreen mode

5. Add the compiled CSS file to your web pages

<link href="/ui/dist/tailwindcss/tailwind.css" rel="stylesheet" type="text/css">
Enter fullscreen mode Exit fullscreen mode

And we're done!

If the development gods were smiling upon you and everything worked as it should. You should now be able to follow the Tailwind CSS documentation and start playing with their great utility functions.

In a very short space of time. I have managed to replicate the entire responsive layout of the site I will be reskinning.

How many lines of custom CSS code have I had to write so far?...Zero!

How many !important overrides have I been forced to write so far?...Zero!

This makes me happy.

Useful URLS

https://www.tailwindcss.com

https://www.npmjs.com/package/tailwindcss

https://www.npmjs.com/package/grunt-postcss

https://www.npmjs.com/package/autoprefixer

Top comments (2)

Collapse
 
diogenespolanco profile image
Diógenes Polanco • Edited

Grunt is very good but gulp is the future, it is faster and similar.

Collapse
 
chrisfinnigan profile image
Chris Finnigan

Absolutely. Grunt is pretty old. The existing build tasks run well at the moment so there is no desperate need to update the build tools just yet on this project. It will happen eventually though.

There are a lot of old bootstrap sites out there running with Grunt build tasks that could benefit from a move to Tailwind :)