92 lines
3.1 KiB
Markdown
92 lines
3.1 KiB
Markdown
---
|
||
title: Using Tailwind CSS in your Drupal Theme
|
||
layout: post
|
||
tags:
|
||
- drupal
|
||
- drupal-planet
|
||
- drupal-theming
|
||
- tailwind-css
|
||
---
|
||
## What is Tailwind?
|
||
|
||
> Tailwind is a utility-first CSS framework for rapidly building custom user interfaces.
|
||
|
||
It generates a number of utility classes that you can add to your theme's markup to apply different styling, as well as the ability to apply classes to other markup and create components comprised of utility classes using a custom `@apply` PostCSS directive.
|
||
|
||
## Initial Configuration
|
||
|
||
The installation and configuration steps are essentially the same as those outlined within the [Tailwind documentation][1], and should be performed within your custom theme's directory (e.g. `sites/all/themes/custom/mytheme` for Drupal 7 or `themes/custom/mytheme` for Drupal 8:
|
||
|
||
1. Require PostCSS and Tailwind via `npm` or `yarn`.
|
||
1. Generate a configuration file using `./node_modules/.bin/tailwind init`.
|
||
1. Tweak the settings as needed.
|
||
1. Add a `postcss.config.js` file.
|
||
1. Configure your build tool (Gulp, Grunt, Webpack).
|
||
1. Generate the CSS.
|
||
1. Include a path to the generated CSS in your `MYTHEME.info`, `MYTHEME.info.yml` or `MYTHEME.libraries.yml` file.
|
||
|
||
## PostCSS Configuration
|
||
|
||
Create a `postcss.config.js` file and add `tailwindcss` as a plugin, passing the path to the config file:
|
||
|
||
```language-json
|
||
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:
|
||
|
||
```language-json
|
||
options: {
|
||
prefix: 'tw-',
|
||
important: true,
|
||
...
|
||
}
|
||
```
|
||
|
||
### Prefix
|
||
|
||
By adding a prefix like `tw-`, we can ensure that the Tailwind classes don’t conflict with core HTML classes like `block`. We can also ensure that they won't conflict with any other existing HTML or CSS.
|
||
|
||
No prefix:
|
||
|
||
{.with-border}
|
||
|
||
With prefix:
|
||
|
||
{.with-border}
|
||
|
||
### Important
|
||
|
||
We can also set the `!important` rule on all Tailwind’s generated classes. We need to do this if we want to override core styles which have more specific rules.
|
||
|
||
For example: if I had this core markup then the left margin added by `tw-ml-4` would be overridden by core’s `.item-list ul` styling.
|
||
|
||
```language-html
|
||
<div class="item-list">
|
||
<ul class="tw-ml-4">
|
||
...
|
||
</ul>
|
||
</div>
|
||
```
|
||
|
||
{.with-border}
|
||
|
||
With the `!important` rule enabled though, the Tailwind’s class takes precedence and is applied.
|
||
|
||
{.with-border}
|
||
|
||
## Example
|
||
|
||
For an example of Tailwind within a Drupal 8 theme, see the custom theme for the [Drupal Bristol website][0] on GitHub.
|
||
|
||
[0]: https://github.com/drupalbristol/drupal-bristol-website/tree/master/web/themes/custom/drupalbristol
|
||
[1]: https://tailwindcss.com/docs/installation
|
||
[2]: https://www.npmjs.com/get-npm
|
||
[3]: https://yarnpkg.com/lang/en/docs/install
|