README

轻松使用 Tailwind CSS 与 TYPO3。Tailwind Styled Content 是 fluid_styled_content 的替代方案，使用 Tailwind CSS 提供一个干净、强大且现代的起点，用于构建 TYPO3 网站。

包含内容

内容元素

Tailwind Styled Content 提供了一些基本模板（并非所有）默认内容元素。重要的是要说明，我们进行了一些有见地的调整和设置。这就是为什么它不是 fluid_styled_content 的直接替换，更适用于新项目。

简化内容元素布局
删除和添加了一些 frame_class 选项
新的 .frame 空间 API
全面重写了 textmedia 模板和 gallery 部分内容
删除和添加了一些 imageorient 选项
禁用了以下内容元素
- textpic（以 textmedia 代替）
- table（以 RTE 表格代替）
- bullets（以 RTE 列表代替）

更多详细信息，请参考单个文件。

我们还引入了一个 Prose 部分内容，可按以下方式使用

<f:render partial="Prose" contentAs="content">
    <!-- content -->
</f:render>

表单元素

我们通过 YAML 覆盖了默认表单元素类，因为它们最初是为 Bootstrap 设计的。我们使用 version2 的表单模板。

Tailwind 插件和预设

Tailwind Styled Content 随附一个 Tailwind 预设、一个安全列表和一个插件，您可以直接从 composer 包中导入。无需安装额外的 npm 包。

该预设扩展了 Tailwind 的默认主题，使其更适合 TYPO3 网站。它还包括所需的插件，如 daisyUI，这使得 Tailwind 可用于非组件化 JS 框架，以及 tailwindcss/typography 用于 RTE 和默认标题样式。

Tailwind Styled Content 插件使用 .frame 类为所有内容元素添加强大且灵活的间距。通过 space_before_class 和 space_after_class 字段添加的组合类，以调整单个内容元素的间距，看起来如下：frame-space-(before|after)-(none|small|large)。有关进一步定制的详细信息，请参阅自定义部分。

入门指南

1. 安装 Tailwind Styled Content (TSC)

通过 Composer 安装

composer req jramke/tailwind-styled-content

注意：对于旧版安装，请使用后端扩展管理器。确保调整 Tailwind 配置中的路径。

2. 初始化 Tailwind

要初始化 Tailwind，请使用推荐的 PostCSS。按照以下说明操作：使用 PostCSS 安装 Tailwind CSS。

为了方便设置，请使用 Simon Praetorius 的 vite-asset-collector，并在您的 JS 入口文件中简单地导入您的 CSS 文件。更多信息请参阅：Vite Asset Collector。

3. 安装其他依赖项

由于 Tailwind Styled Content 依赖于 daisyUI 和 @tailwindcss/typography，因此您需要将它们作为开发依赖项安装

npm i -D daisyui@latest @tailwindcss/typography

4. 设置 Tailwind 配置

将 Tailwind 样式化内容添加到您的 tailwind.config.js 文件中。您需要自行定义 content 路径和 safelist，因为它们不会与预设合并。

import { preset, safelist } from './vendor/jramke/tailwind-styled-content';
 
/** @type {import('tailwindcss').Config} */
module.exports = {
	presets: [preset],
	content: [
		'./vendor/jramke/tailwind-styled-content/**/*.{html,yaml,typoscript,tsconfig}',
		'packages/**/*.{html,js,yaml,typoscript,tsconfig}',
	],
	safelist: [...safelist],
}

自定义

Tailwind

对于基本的 Tailwind 自定义，请参阅 Tailwind 文档。

daisyUI

要自定义 daisyUI，我建议使用这种方法，其中您通过品牌颜色扩展现有主题。更多详情请参阅 daisyUI 文档。

Tailwind 样式化内容 (TSC)

要自定义 Tailwind 样式化内容，请使用您 Tailwind 配置中的 tsc 对象。

您可以通过调整默认垂直填充、特定断点填充和组合类的间距来调整 .frame 组件的 CSS。将 frame: false 设置为完全排除这些样式。

默认配置如下

tsc: {
    frame: {
        default: '2.5rem',
        screens: {
            lg: '3.5rem',
        },
        multipliers: {
            small: '1.5',
            large: '1.5',
        },
    },
}

Tailwind 字体排版

要自定义字体排版样式，扩展您的 Tailwind 配置或覆盖您分发扩展中的 Prose.html 部分 learn more here。

开发

开发设置使用 DDEV，并基于这个例子。

启动 DDEV 项目

ddev start

安装 JavaScript 依赖项

npm install

TYPO3

1. 设置所需版本的 TYPO3 开发环境

ddev install-v11
ddev install-v12
ddev install-v13

安装可用于此

您可以使用用户名 admin 和密码 Password1# 登录到后端。

2. 添加 Tailwind 样式化内容的静态 TypoScript 文件

3. 在您的 TYPO3 页面中包含生成的 Tailwind CSS

page.includeCSS {
    tailwind = /output.css
    tailwind {
    	disableCompression = 1
    	excludeFromConcatenation = 1
    }
}

4. 启动 Tailwind CLI 构建过程

将 [VERSION] 替换为您想要的安装版本（例如 v12）

ddev exec -d /var/www/html/[VERSION] npm run tailwind

jramke / tailwind-styled-content

维护者

详情