Demo

任务一

任务二

import React from 'react';
import { icon, data, imageURL } from './constant';

const View = () => {
    return (
        <div className="p-5 bg-[#000]">
            <div className="flex flex-col m-[14px] w-[340px] rounded-[12px] bg-[#fff] divide-[#ececec] divide-y-[1px]">
                {data.map((section) => (
                    <div
                        className="flex items-center p-[20px] pr-[15px]"
                        key={section.title}
                    >
                        <img
                            className="w-[30px] aspect-square mr-[10px]"
                            src={imageURL}
                        />
                        <div className="grow [font-weight:bold]">
                            {section.title}
                        </div>
                        <div className="w-[18px] aspect-square">
                            {icon(section.done ? '#28d3b0' : '#eee')}
                        </div>
                    </div>
                ))}
            </div>
        </div>
    );
};

注意点

单位

对于这一行：

<div className="flex flex-col m-[14px] w-[340px] rounded-[12px] bg-[#fff] divide-[#ececec] divide-y-[1px]">

其中，m-[14px] 表示 margin: 14px 。中括号是 Tailwind 的立即值（Arbitrary values）语法。

其实还有 m-14 ，但默认代表 margin: 14rem 。因为 Tailwind 将 rem 作为默认单位。

不过可以设置 tailwind.config.js 中对应的单位，从而使 m-14 代表 margin: 14px ：

module.exports = {
    theme: {
        spacing: {
            14: '14px',
        },
    },
};

同时，上面的 spacing 默认仅覆盖了一些数值：

spacing: {
    // ...
    4: '1rem',
    5: '1.25rem',
    6: '1.5rem',
    7: '1.75rem',
    8: '2rem',
    9: '2.25rem',
    10: '2.5rem',
    11: '2.75rem',
    12: '3rem',
    14: '3.5rem',
    16: '4rem',
    20: '5rem',
    // ...
}

如果使用 m-15 则并不会达到 margin: 15rem 的效果，而是应用了一个基础的值。如果要使用 m-15 则需要在 spacing 中添加 15: '15rem'

立即属性

对于这一行：

<div className="grow [font-weight:bold]">

其中的 [font-weight:bold] 则使用了 Tailwind 的立即属性语法。即应用了 font-weight: bold 。

但 Tailwind 其实也有对应的 font-bold 便捷写法，但默认对应的是 font-weight: 700 。

可以直接修改 tailwind.config.js 导出中 theme.fontWeight.bold 的值为 'bold' 。