Drupal 8：使用 Tailwind CSS 进行主题化

Z时代
2024-01-10
分类：综合

在我当地 Drupal 用户组的某个人的推荐下，我决定试一试 Tailwind CSS。这样做的最终目的是用更精简的主题替换我在这里使用的基本主题。在写这篇文章的时候，我正在使用 Cog 主题，虽然它有它的优点，但我发现对于这个简单的站点来说有点太多了。

因此，我决定创建一个新主题并使用 Tailwind CSS 稍微改变站点。这意味着将 Tailwind CSS 集成到 Drupal 主题中的练习。

顺风CSS？

如果您还没有听说过 Tailwind CSS，我将在此处引用该站点。

“Tailwind CSS 是一个高度可定制的低级 CSS 框架，它为您提供了构建定制设计所需的所有构建块，而没有任何令人讨厌的固执己见的样式，您必须努力克服。”

当我第一次遇到 Tailwind CSS 时，这对我来说没什么意义。然而，当我研究它时，我发现它是一个非常有趣的想法，但如果您熟悉传统 CSS，确实需要一些时间来适应。

最重要的是，您不必使用站点的标记并编写大量的 CSS，而是将类注入到标记中以控制元素的样式。这意味着您最终编写的 CSS 少得多，最终结果是一个布局非常漂亮的站点，只有几个类。

尽管听起来您需要到处注入类才能使事情正常工作，但实际情况是您只需要几个类就可以创建很多效果。

以以下 HTML 为例。

如果我们想为文本添加一些格式，我们将向 p 元素添加一些类。

为了说明，添加的类执行以下操作。

text-center : 将文本居中对齐。
text-gray-600：将颜色十六进制值 #718096 添加到元素（使文本变为灰色）。
underline ：对元素应用下划线样式。
text-3xl ：将 font-size 属性设置为 1.875rem。

就我个人而言，不是前端开发人员，这种方法实际上非常直观，我发现自己可以轻松使用所需的类。该项目有许多合理的默认值，因此您只倾向于向您想要设置样式的内容添加类。

将 Tailwind CSS 添加到 Drupal

将 Tailwind CSS 添加到 Drupal 以一个空白的 Drupal 主题开始，不包含模板。这是我在目录 themes/custom/tailwindcss_theme 中创建的文件。

首先，主题信息文件tailwindcss_theme.info.yml。

name: 'Drupal Tailwind CSS Theme'

type: theme

description: 'Drupal Tailwind CSS Theme'

core_version_requirement: ^8 || ^9

base theme: false

libraries:

- tailwindcss_theme/global_styles

regions:

header: 'Header'

primary_menu: 'Primary Menu'

secondary_menu: 'Secondary Menu'

breadcrumb: 'Breadcrumb'

highlighted: 'Highlighted'

help: 'Help'

pre_content: 'Pre Content'

content: 'Content'

post_content: 'Post Content'

sidebar_first: 'Sidebar First'

sidebar_second: 'Sidebar Second'

footer: 'Footer'

接下来是库文件，它将指向我们尚未创建的 CSS 文件（稍后会出现）。这是名为 tailwindcss_theme.libraries.yml 的文件。

global_styles:

version: VERSION

css:

theme:

css/styles.css: {}

有了它，我们现在可以使用以下命令设置我们的 npm 项目。

npm init

这将创建一个package.json文件，它本身不会做很多事情，所以下一步是安装 Tailwind CSS。我们通过将 tailwindcss 包安装为这样的开发依赖项来做到这一点。

npm install tailwindcss --save-dev

安装 Tailwind CSS 后，我们可以创建默认配置文件。以下命令将创建一个名为 tailwind.config.js 的文件。此文件用于控制 Tailwind CSS 的一些配置和设置。

npx tailwindcss init

一切就绪后，我们需要设置源 CSS 文件。在主题目录中的 src/styles.css 中创建一个 CSS 文件并输入以下内容。

@tailwind base;
 
@tailwind components;
 
@tailwind utilities;

这些包含语句将包含 Tailwind CSS 库的不同部分。

这里的最后一步是将 Tailwind CSS 编译成网站可以使用的 CSS。这是使用以下命令完成的，该命令获取 src/styles.css 文件并在 css/styles.css 中生成一个 CSS 文件。

npx tailwindcss build src/styles.css -o css/styles.css

您可以通过使用 npm 脚本来帮助构建样式来加快此过程。

{

"name": "tailwindcss_theme",

"version": "1.0.0",

"description": "Tailwind CSS Theme",

"scripts": {

"build": "npx tailwindcss build src/styles.css -o css/styles.css"

}

有了这个，您可以使用以下命令构建您的样式。

npm run build

这将在 src/styles.css 文件上运行后 CSS 处理器，并将结果放在 css/styles.css 中。我们已经设置了 Drupal 主题以加载到 css/styles.css 文件中，因此该文件将形成站点的样式。

Tailwind CSS 的默认灌输并没有做太多事情，尤其是在基本 Drupal 主题中，很少有类被注入到标记中。

以块模板(block.html.twig)为例，我们可以向块标题添加一个类。这是通过使用addClass()title_attributes 对象上的方法来完成的。

<div{{ attributes }}>
  {{ title_prefix }}
  {% if label %}
    <h2{{ title_attributes.addClass('text-2xl') }}>{{ label }}</h2>
  {% endif %}
  {{ title_suffix }}
  {% block content %}
    {{ content }}
  {% endblock %}
</div>

以上只是将块标题的大小增加到 1.5rem。

为 Drupal 配置 Tailwind CSS

重要的一件事是允许 Tailwind CSS 和 Drupal 很好地协同工作。为此，您可以将前缀选项添加到 tailwind.config.js 配置文件中。

下面将前缀设置为“tw-”。

module.exports = {
  theme: {
    extend: {},
  },
  variants: {},
  plugins: [],
  prefix: 'tw-'
}

这意味着所有 Tailwind CSS 类都必须以“tw-”为前缀，以便正确选取它们。这允许使用 Drupal 特定类（如“块”）而不会被 Tailwind CSS 选取。虽然没有这个选项你可以很好地相处，但是当两个系统试图使用相同的类名时，你会发现会产生奇怪的行为。

集成 SASS 和 Gulp

虽然我本可以停在那里，但我还需要将 SASS 构建步骤集成到构建 CSS 的过程中。这是因为我想包含一些预先存在的 SASS 规则。Tailwind CSS 是一个 postcss 系统，这意味着不包含 SASS 处理，因此为了做到这一点，我需要包含一个 CSS 预处理器。

我的 SASS 文件保存在主题内的 src/sass/components/thing.sass 中，为了使用这个文件，我需要将它处理到 src/components/thing.css 中。然后我需要将它包含在主 src/style.css 文件中，以便我们可以使用 Tailwind CSS 生成 css/style.css。然后该文件将包含来自 Tailwind CSS 和 SASS 规则的所有样式。

为了实现这一点，我需要安装更多工具。

gulp - gulp 构建包。
gulp-sass - 将 SASS 处理为 CSS。
gulp-cli - 为 gulp 提供命令行界面。
gulp-postcss - 将 gulp 与 postcss 集成，并允许通过 gulp 处理 Tailwind CSS。
postcss-import - 使用 postcss 添加额外的导入规则，并允许将自定义文件包含到构建过程中。

要安装所有这些工具，我们使用以下命令。

npm install gulp --save-dev

npm install gulp-cli --save-dev

npm install gulp-postcss --save-dev

npm install gulp-sass --save-dev

npm install postcss-import --save-dev

有了所有这些工具，我们需要将构建脚本放在一起，以便我们可以处理 SASS 文件并运行 Tailwind CSS 处理。为此，我整理了以下内容，gulpfile.js其中包含命令 'sass' 和 'styles'，尽管默认情况下 'styles' 命令将首先运行 'sass' 命令。

var gulp = require('gulp');
var sass = require('gulp-sass');
var postcss = require('gulp-postcss');
 
gulp.task('sass', function () {
    return gulp.src('src/sass/**/*.sass')
        .pipe(sass().on('error', sass.logError))
        .pipe(gulp.dest('./src'));
});
 
gulp.task('styles', gulp.series('sass', function () {
    var tailwindcss = require('tailwindcss');
    var postcssimport = require('postcss-import');
 
    return gulp.src('src/styles.css')
        .pipe(sass().on('error', sass.logError))
        .pipe(postcss([
            postcssimport(),
            tailwindcss('./tailwind.config.js'),
            require('autoprefixer'),
        ]))
        .pipe(gulp.dest('./css'));
}));

通过添加 @import 选项，需要对主 src/styles.css 文件稍作修改。这允许我们使用 postcss-import 导入我们使用 gulp 编译的所需 CSS 文件。请注意，我们需要将@import 命令添加到文件顶部。

@import "./components/custom.css";
 
@tailwind base;
@tailwind components;
@tailwind utilities;

包含 gulp-cli 工具允许我们使用单个命令构建样式。

./node_modules/gulp-cli/bin/gulp.js styles

我们也可以将其放入package.json文件中，以便我们可以更轻松地构建样式。

{
  "name": "tailwindcss_theme",
  "version": "1.0.0",
  "description": "Tailwind CSS Drupal Theme",
  "scripts": {
    "gulp": "./node_modules/gulp-cli/bin/gulp.js styles",
    "build": "npx tailwindcss build src/styles.css -o css/styles.css"
  },
  "dependencies": {},
  "devDependencies": {
    "gulp": "^4.0.2",
    "gulp-cli": "^2.2.0",
    "gulp-postcss": "^8.0.0",
    "gulp-sass": "^4.0.2",
    "postcss-import": "^12.0.1",
    "tailwindcss": "^1.2.0"
  }
}

这意味着我们可以运行“npm run build”来构建项目中的所有样式。

清除CSS

我在这里错过的一件事是清除您没有使用的 CSS 规则。整个 TailwindCSS 库超过一兆字节，因此删除未使用的项目是任何 TailwindCSS 设置的重要组成部分。此处使用的库是 PurgeCSS，可用于清除任何未使用的 CSS 类。

要安装 PurgeCSS 以与 gulp 一起使用，请使用 gulp-purgecss 库，可以通过以下方式将其安装为开发依赖项。

npm install gulp-purgecss --save-dev

有了这个，我们需要通知 PurgeCSS 主题中可用的类，以便它们不会被清除。我还需要更新用于匹配类的正则表达式，以便选择而不是清除所有类和子类。

gulp.task('styles', gulp.series('sass', function () {
    var tailwindcss = require('tailwindcss');
    var postcssimport = require('postcss-import');
 
    return gulp.src('src/styles.css')
        .pipe(sass().on('error', sass.logError))
        .pipe(postcss([
            postcssimport(),
            tailwindcss('./tailwind.config.js'),
            require('autoprefixer'),
        ]))
        .pipe(purgecss({
            mode: 'layers',
            content: [
                'templates/**/*.twig',
                '../../../../config/**/*.yml',
                'hashbangcode_theme2.theme',
                'src/sass/**/*.scss'
            ],
            defaultExtractor: content =>
              content.match(/[\w-/:]+(?<!:)/g) || []
        }))
        .pipe(gulp.dest('./css'));
}));