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

2023-06-05 18:05:02 79

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

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

顺风CSS？

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

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

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

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

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

以以下HTML为例。

Sometext.

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

Sometext.

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

text-center:将文本居中对齐。

text-gray-600：将颜色十六进制值#718096添加到元素（使文本变为灰色）。

underline：对元素应用下划线样式。

text-3xl：将font-size属性设置为1.875rem。

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

将TailwindCSS添加到Drupal

将TailwindCSS添加到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项目。

npminit

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

npminstalltailwindcss--save-dev

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

npxtailwindcssinit

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

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

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

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

npxtailwindcssbuildsrc/styles.css-ocss/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"
  }
}

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

npmrunbuild

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

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

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


  {{ title_prefix }}
  {% if label %}
    {{ label }}
  {% endif %}
  {{ title_suffix }}
  {% block content %}
    {{ content }}
  {% endblock %}

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

为Drupal配置TailwindCSS

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

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

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

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

集成SASS和Gulp

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

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

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

gulp-gulp构建包。

gulp-sass-将SASS处理为CSS。

gulp-cli-为gulp提供命令行界面。

gulp-postcss-将gulp与postcss集成，并允许通过gulp处理TailwindCSS。

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文件并运行TailwindCSS处理。为此，我整理了以下内容，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.jsstyles

我们也可以将其放入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"
  }
}

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

清除CSS

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

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

npminstallgulp-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-/:]+(?
这大大减少了CSS的占用空间，并将1.2MB的CSS文件变成了大约23KB。请注意，如果您在内容中使用了TailwindCSS样式，那么除了您拥有的任何其他主题文件或配置项之外，您还需要将此更改通知PurgeCSS。
谢谢
最后，我要感谢OliverDavies，他创建了一篇博文和一个Drupal主题，其中还将提供有关如何开始使用TailwindCSS的信息。Oliver在构建样式时采用了稍微不同的方法，也没有使用任何预处理，但他创建的主题是一个非常好的起点。