Skip to main content

Tailwind CSS is a highly customisable framework that delivers developers the tools to quickly pull your site together.

 

Initial Configuration

The installation and configuration steps are essentially the same as those outlined within the Tailwind documentation.

Note they need to be performed within your custom theme's directory such as /themes/custom/{theme} for Drupal 8

  1. Install Tailwind and PostCSS via npm or yarn.  I used npm... 
    # Using npm
    npm install tailwindcss
  2. Generate a configuration file using
    ./node_modules/.bin/tailwind init
  3. Tweak the settings to your requirements
  4. Add a postcss.config.js file
  5. Configure your build tool (Gulp, Grunt, Webpack).  See below for details on how to install for web pack installation
  6. Generate the CSS
  7. Include a path to the generated CSS in your {theme}.info,{theme}.info.yml or {theme}.libraries.yml file

 

PostCSS Configuration

Create a postcss.config.js file (you can use touch postcss.config.js to generate this file)

touch postcss.config.js

Add tailwindcss as a plugin, passing the path to the config file through entering the following in to the postcss file

module.exports = {
    plugins: [
        require('tailwindcss')('./tailwind.js'),
    ]
}

 

Configuration for Drupal

There are some configuration settings within tailwind.js that you’ll need to change to make things work nicely with Drupal. These are within the options section:

options: {
    prefix: 'tw-',
    important: true,
    ...
}

 

Prefix

By adding a prefix like tw-, you can ensure that the Tailwind classes don’t conflict with core HTML classes. Importantly you can also ensure that they won't conflict with any other existing HTML or CSS.

 

Checking web pack installation

The check if Webpack is installed run the following command:

webpack -v

Currently this is showing 4.44.2

However, if this has not been installed on your server, the process is simple through Shell.  Follow the instructions on NPM webpack.

 

Playground

Note that tailwind css has a playground if you need to run some quick testing.