如何在Optimizely CMS中安装Tailwind CSS并集成Figma设计令牌？

一、确保Tailwind CSS正确应用到Razor视图 #

你已完成基础安装步骤，需补充以下验证和调整：

• 确认content路径覆盖所有Razor文件
  Optimizely的视图通常分布在Views、Features（模块化开发场景）或Pages文件夹，确保tailwind.config.js的content数组包含所有相关路径：

  module.exports = {
    content: [
      "./Views/**/*.cshtml",
      "./Features/**/*.cshtml",
      "./Pages/**/*.cshtml", // 使用Razor Pages时需添加
      "./Shared/**/*.cshtml" // 共享布局/组件文件
    ],
    // 其余配置项...
  }
  

• 验证CSS文件的正确引入
  在Optimizely的主布局文件（如_Layout.cshtml）中，引入编译后的Tailwind CSS文件，路径需匹配你的FED文件夹结构：

  <link rel="stylesheet" href="~/FED/dist/output.css" asp-append-version="true" />
  

  加上asp-append-version可避免浏览器缓存旧样式文件。

• 确认构建命令正常运行
  启动Tailwind实时编译命令，确保修改视图或样式时能自动更新CSS：

  npx tailwindcss -i ./FED/src/input.css -o ./FED/dist/output.css --watch
  

  若使用npm脚本，可在package.json中添加：

  "scripts": {
    "dev": "tailwindcss -i ./FED/src/input.css -o ./FED/dist/output.css --watch",
    "build": "tailwindcss -i ./FED/src/input.css -o ./FED/dist/output.css --minify"
  }
  

  开发环境运行npm run dev，生产环境打包用npm run build。

二、自动导入Figma设计令牌到Tailwind CSS #

无需手动逐个添加令牌，可通过以下步骤实现自动化导入：

1. 导出Figma设计令牌为JSON #

使用Figma插件（如Tokens Studio for Figma）将设计系统的颜色、间距、字体等令牌导出为标准JSON格式，保存到FED文件夹中（命名为tokens.json）。

示例导出的tokens.json结构：

{
  "colors": {
    "brand": {
      "primary": "#2563eb",
      "secondary": "#7c3aed"
    },
    "neutral": {
      "gray-100": "#f3f4f6",
      "gray-900": "#111827"
    }
  },
  "spacing": {
    "xs": "0.25rem",
    "sm": "0.5rem",
    "md": "1rem",
    "lg": "1.5rem"
  },
  "borderRadius": {
    "sm": "0.25rem",
    "md": "0.375rem",
    "lg": "0.5rem"
  }
}

2. 在Tailwind配置中导入并映射令牌 #

修改tailwind.config.js，导入令牌文件并将其映射到Tailwind的theme配置中：

// 导入Figma令牌文件
const designTokens = require('./FED/tokens.json');

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [/* 已配置的路径 */],
  theme: {
    extend: {
      // 映射颜色令牌
      colors: designTokens.colors,
      // 映射间距令牌
      spacing: designTokens.spacing,
      // 按需添加其他令牌类型
      borderRadius: designTokens.borderRadius,
      fontFamily: designTokens.fontFamily
    },
  },
  plugins: [],
}

3. 处理非标准结构的令牌 #

如果导出的令牌嵌套结构复杂（如包含value字段），需先转换格式。例如，若令牌结构如下：

{
  "colors": {
    "brand": {
      "primary": {
        "value": "#2563eb"
      }
    }
  }
}

可编写简单转换函数：

function flattenTokens(tokens) {
  const result = {};
  for (const key in tokens) {
    if (typeof tokens[key] === 'object' && !('value' in tokens[key])) {
      result[key] = flattenTokens(tokens[key]);
    } else {
      result[key] = tokens[key].value || tokens[key];
    }
  }
  return result;
}

const designTokens = flattenTokens(require('./FED/tokens.json'));

再将转换后的tokens映射到Tailwind主题中即可。

内容的提问来源于stack exchange，提问作者Jay Thakkar