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.
"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.
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.
npm install tailwindcss --save-dev
npm install grunt-postcss --save-dev
npm install autoprefixer --save-dev
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'])
}Add the following code to your tailwind.css file
@tailwind base;
@tailwind components;
@tailwind utilities;To manually compile your TailwindCSS files:
grunt compile-tailwindcss
To compile your TailwindCSS files on src changes:
grunt watch-tailwindcss
<link href="/ui/dist/tailwindcss/tailwind.css" rel="stylesheet" type="text/css">
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.
https://www.npmjs.com/package/tailwindcss