Frontend Css

CSS 框架

Tailwind CSS

基础用法

  文本

响应式

  Item 1
  Item 2
  Item 3

深色模式

  内容

CSS Modules

/* Button.module.css */
.button {
  background: blue;
  color: white;
}

import styles from './Button.module.css';

按钮

Styled Components

import styled from 'styled-components';

const Button = styled.button`
  background: blue;
  color: white;
  padding: 8px 16px;
  border-radius: 4px;
  
  &:hover {
    background: darkblue;
  }
`;

选择指南

• Tailwind: 快速开发、原子化
• CSS Modules: 原生、模块化
• Styled Components: CSS-in-JS、动态样式

参考

• .cursor/rules/react.mdc

Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

• Author: awesome-ai-dev
• Source: awesome-ai-dev/awesome-ai-dev
• License: MIT

Install and usage instructions live in the source repository linked above.