113 lines
3.1 KiB
Markdown
113 lines
3.1 KiB
Markdown
|
---
|
|||
|
|
title: Using Tailwind CSS in your Drupal Theme
|
|||
|
|
date: 2018-02-05
|
|||
|
|
excerpt: What is Tailwind CSS, and how do I use it in Drupal theme?
|
|||
|
|
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-js
|
|||
|
|
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-js
|
|||
|
|
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
|