11、CSS构建与应用：从基础到动画效果

CSS构建与应用：从基础到动画效果

1. CSS构建基础

在CSS构建方面，我们采用了极简的设置，仅使用Tailwind来构建CSS文件，而未使用Sass或PostCSS这两个流行的CSS工具包。

主要的Tailwind加载和CSS文件位于 app/assets/stylesheets/application.tailwind.css ，内容如下：

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

此文件的作用是告知Tailwind插入其CSS，目前未编写其他自定义CSS。

Tailwind的设置由配置文件 tailwind.config.js 管理，当前内容如下：

module.exports = {
  content: [
    "./app/views/**/*.(html|turbostream).erb",
    "./app/helpers/**/*.rb",
    "./app/javascript/**/*.(js|ts|tsx)",
    "./config/initializers/simple_form_tailwind.rb",
  ],
}

在 package.json 文件中，有一个名为 build:css 的调用，用于