Adding Tailwind css to Drupal

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.