如何在Jekyll中使用Tailwind CSS？遇{ expectedcss错误求助

问题根源 #

Jekyll会把带YAML前置声明的CSS文件当作处理过的资产文件，但CSS解析器不认识开头的---，直接把它当成无效语法，所以抛出{ expectedcss(css-lcurlyexpected)错误。而移除---的话，Jekyll又不会处理这个CSS文件，导致Tailwind的导入不生效。

修复方案 #

1. 规范CSS文件的结构 #

必须保证YAML前置块和CSS代码之间有明确的分隔，正确格式如下：

---
# 这里可以留空，或者添加Jekyll需要的配置（CSS文件一般留空即可）
---

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

/* 你的自定义CSS代码写在这里 */

重点：YAML块的---要单独占行，结束后空一行再写CSS代码，避免解析器把YAML内容和CSS代码混在一起。

2. 处理编辑器误报 #

很多编辑器（比如VS Code）会把带YAML前置的CSS文件识别为混合格式，导致错误提示误报。可以：

• 安装Jekyll相关的语法插件，让编辑器正确识别这种文件类型
• 暂时忽略该提示，先运行Jekyll服务验证实际效果

3. 确认Jekyll资产配置 #

检查_config.yml里的资产配置，确保CSS文件所在目录被Jekyll纳入处理范围，示例配置：

assets:
  sources:
    - assets/css

验证步骤 #

执行bundle exec jekyll serve启动本地服务，如果站点能正常加载，且Tailwind的样式生效，说明配置正确，编辑器的错误提示属于误报，无需理会。

内容的提问来源于stack exchange，提问作者Revati Tambe