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 9

  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

    or

    npx tailwindcss init

    You will know if everything is installed ok, you should now see a "node_modules" directory & packages.json, packages-lock.json as well as tailwind.config.js files in your themes root directory.

  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 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 by entering the following into 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 5.67.0

However, if this has not been installed on your server, the process is simple through Shell.  Follow the instructions on NPM webpack ~ https://www.npmjs.com/package/webpack.  Or use the command

npm i webpack

 

Playground

Note that tailwind css has a playground ~ https://play.tailwindcss.com/  if you need to run some quick testing.

Related articles

Andrew Fletcher07 Sep 2022

common Drush commands

If your Composer project doesn't have Drush listed as a dependency, you can install Drush from command line as follows: composer require drush/drush To check your version of Drush, use drush --version   Status check drush status Will output something similar to ...