Tailwind CSS 初探

September 5, 2024

Tailwind CSS，一个精简、实用、高度可定制的css框架，相比于其他UI框架，它没有预设的组件，但提供了语义化明确的精简类名，通过一个个class的组合就可以帮助开发者快速构建一个fancy的页面。

安装

要将Tailwind CSS加入你的项目，只需在项目的根目录执行


    npm install -D tailwindcss
    npx tailwindcss init

现在tailwindcss已经加入你的项目，并且已经初始化tailwindcss config文件，


    /** @type {import('tailwindcss').Config} */

    export default {
        content: ['./src/**/*.{html,js}'],
        theme: {
            extend: {},
        },
        plugins: [],
    }

现在你就可以肆无忌惮的为你的div添加class了。

使用示例

我们以为button设置不同的背景颜色为例


    <button class="bg-blue-300 ..."></button>
    <button class="bg-red-100 ..."></button>
    <button class="bg-yellow-500 ..."></button>

还可以为button添加 border, border-gray-400, rounded 以优化边框，更多类名及使用介绍请参考官方文档。

答疑

在集成tailwind CSS的过程中，也出现了一些问题，在此列出并解决方案，供参考，

  1. Tailwind CSS 重置所有默认样式，例如 h1, h2, h3 字体大小样式归零

默认情况下，preflight为true，所有元素默认样式归零


    h1,h2,h3,h4,h5,h6 {
        font-size: inherit;
        font-weight: inherit
    }

    a {
        color: inherit;
        text-decoration: inherit
    }

此时为了恢复h类元素字体大小，我们需要在config文件里将preflight设置为false


    // tailwind.config.js

    module.exports = {
        // ...
        corePlugins: {
            preflight: false,
        },
        // ...
    };
Tailwind CSS 初探