tailwind-1.0.0-nuxt

How to use Tailwind CSS 1.0.1 in Nuxt

The final release of Tailwind CSS 1.0.1 is here. Time to integrate the next Tailwind version into nuxt and vue.js

I would like to mention that there is already an official upgrade guide which you should follow too. So if you want to know in-depth changes especially for the new config file please look at the official upgrade documentation. The following guide is written to use Tailwind with nuxt.js.

Table of contents

1. Install Tailwind CSS 1.0.1

Start your terminal. cd to your project and upgrade to the latest tailwind build.

npm install tailwindcss --save-dev
# or
yarn add -D tailwindcss

2. Rename your Tailwind Config file to tailwind.config.js

If you don't have a tailwind.js config file in your project root directory then create a file called tailwind.config.js or rename your existing config file. In the official Tailwind documentation, you can read that the rename part is entirely optional but recommended.

3. New default Config structure

Put the following code snippet in the tailwind.config.js or adjust your existing file according to the new defaults which you can read up here.

module.exports = {
prefix: '',
important: false,
separator: ':',
theme: {},
variants: {},
plugins: [],
}

Click here for an example of the new default config file.

4. Configure postcss in nuxt.config.js

Lets start with the nuxt changes here. Instead of creating a separate file for postcss put the configuration inside the nuxt.config.js. If you have an existing postcss.config.js file which is usually inside your project root - remove it.

*nuxt.config.js

Add the path lib to the top of the config.

const path = require('path')
// you will need to include the @tailwind directives inside this
// css file.
css: [
'~assets/css/tailwind.css',
],
// this is necessary
build: {
postcss: {
plugins: {
tailwindcss: path.resolve(__dirname, './tailwind.config.js')
}
}
}

5. Replace @tailwind preflight with @tailwind base

Look for your tailwind.css file where you make the basic includes and add the @tailwind directive to inject the base styles.

@tailwind base;

@tailwind components;

@tailwind utilities;

Or if you have an existing tailwind project update the code to the following

- @tailwind preflight
+ @tailwind base

You're now finished with your Tailwind CSS 1.0.1 setup. 🎉

The following parts are useful additions to the basic config.

[BONUS] Use purgecss to remove unused css in the production build

The big advantage of purgecss is that your production website will get stripped of unused css which results in small css outputs.

First, we're going to install the nuxt-purgecss module

npm install nuxt-purgecss --save-dev
# or
yarn add -D nuxt-purgecss

Enable this module inside the modules section of your nuxt.config.js. You don't need to write a specific Tailwind Extractor since nuxt-purgecss does this by default.

{
modules: [
'nuxt-purgecss',
],
purgeCSS: {}
}

You will need also extractCSS option for purgeCSS.

build: {
extractCSS: true
}

[BONUS] Use Google Fonts with nuxt js and Tailwind

If you want to use Google Fonts or maybe Adobe Typekit its really easy to achieve it with this setup. We will use the nuxt-webfontloader.

npm install --save-dev nuxt-webfontloader
# or
yarn add -D node-sass nuxt-webfontloader

Include the nuxt-webfontloader to module section of nuxt.config.js

{
modules: [
'nuxt-webfontloader',
],
}

Add your Google Fonts you want to use inside nuxt.config.js

export default {
webfontloader: {
google: {
families: ['Lato:400,700'] //Loads Lato font with weights 400 and 700
}
},
}

The next part is really up to you on how you want to handle fonts inside your app.
Here are some tips to use it with the tailwind.config.js.

What we're going todo is to add Lato font to the default sans Font Family Stack.

// load default theme settings
const defaultTheme = require('tailwindcss/defaultTheme')

module.exports = {
theme: {
extend: {
fontFamily: {
sans: [
'Lato',
...defaultTheme.fontFamily.sans,
]
},
}
}
}

And then apply this default fontFamily style to the html tag.

html {
font-family: @apply font-sans;
}

[BONUS] How to use sass with Tailwind 1.0.1

If you would like to use sass in combination with postcss here are the steps to enable it.

Install node-sass and sass-loader packages to make use of it. Or you can also read the official nuxt guide.

npm install --save-dev node-sass sass-loader
# or
yarn add -D node-sass sass-loader

Rename the prefix of your .css files to .scss. Update your nuxt.config.js to new paths and filenames and you're done.

  css: [
'~assets/scss/tailwind.scss',
'~assets/scss/my-custom.scss',
],

Hint: I would first examine if sass is really necessary for the given use case. E.g. conditionals or nested behaviour you can install a postcss plugin inside nuxt.config.js instead of using sass at all.

Summary

Here is the final nuxt.config.js. Feel free to copy paste and adapt.

import pkg from './package'
const path = require('path')
const glob = require('glob-all')

export default {
mode: 'spa',
head: {
title: pkg.name,
meta: [
{ charset: 'utf-8' },
{ name: 'viewport', content: 'width=device-width, initial-scale=1' },
{ hid: 'description', name: 'description', content: pkg.description }
],
link: [
{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
]
},
loading: { color: '#fff' },
css: [
'~assets/css/tailwind.css'
],
modules: [
'nuxt-purgecss'
],
purgeCSS: {},
build: {
extractCSS: true, // if you use purgeCSS
postcss: {
plugins: {
tailwindcss: path.resolve(__dirname, './tailwind.config.js'),
cssnano: {
preset: 'default',
discardComments: { removeAll: true },
zIndex: false
}
},
// Change the postcss-preset-env settings
preset: {
stage: 0, // enable all (experimental) polyfills
autoprefixer: {
cascade: false,
grid: true
}
}
},
extend(config, ctx) {
// Run ESLint on save
if (ctx.isDev && ctx.isClient) {
config.module.rules.push({
enforce: 'pre',
test: /\.(js|vue)$/,
loader: 'eslint-loader',
exclude: /(node_modules)/
})
}
}
}
}

Sign up for my newsletter.

Subscribe to my Newsletter to receive updates on everything nuxtjs, aws amplify and sass related.