34、前端开发中的CSS应用与实践

前端开发中的CSS应用与实践

在前端网页开发领域，层叠样式表（CSS）是不可或缺的一部分，它极大地改变和提升了用户体验。随着CSS功能的不断增强，如今只需少量的JavaScript代码，结合强大的CSS样式，就能创建出令人惊叹的布局和效果。本文将深入探讨如何将CSS融入项目构建，利用其添加炫酷效果，并使组件更加独立。

1. 在cssbundling - rails中构建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/**/*.