Tailwind Css的安装和使用

katsu 发布于 2024-05-03 326 次阅读

 使用Tailwind Css-纯新手

 安装

官方教程：Installation - Tailwind CSS

但是官方教程里有很多没有提到的东西，下面做补充。

首先安装node.js: Node.js — Run JavaScript Everywhere

安装好之后，可以参考这个教学视频安装Tailwind Css： How to Set up Tailwind CSS Project for Beginners from Scratch - YouTube

注意点：

  • 对于每一个项目都要单独跑一次安装指令，把Tailwind Css装到自己的项目里。npx tailwindcss -i ./src/input.css -o ./src/output.css --watch     这个命令的watch会监控当前项目里用到的样式，然后每次保存动作都会进行一次rebuild，使得必要的样式安装进来

  • 上面的描述意味着如果忘记先跑命令直接写网站了，样式不会反应出来，不是bug了就是单纯没有rebuild

  • Tailwind Css的脚本里如果路径设置src，根据之后的文件结构是有可能无限rebuild的。要避免的话可以改换文件夹名称。官方文档里有更详细的解释。Content Configuration - Tailwind CSS

 使用

Tailwind Css的使用非常简单，就是通过class名不断调用已经封装好的样式。只不过一开始可能会因为名称的缩写之类的有点不适应，用习惯了会觉得非常方便

使用示例：

        <div class="flex justify-between overflow-x-auto relative shadow-md sm:rounded-lg">
            <p id="kenshu" class="text-purple-800 px-4 py-3 font-bold">
                总分（70分及格）：<span id="totalScore">0</span>
            </p>

            <a href="#top" class="bg-blue-500 hover:bg-blue-700 text-white text-base font-bold pt-3 px-2 rounded-xl ">
                回到顶部
            </a>

        </div>

LFhoJh

优点：

  • 没有取名负担

  • 易于维护，不会一不小心动到不想动的地方

  • 快速调用现成的样式

  • 一定的设计托底

缺点

  • 不太优雅，类名会变得非常长

  • 有局限，有些时候还是要自己写css，有种何必呢的感觉

  • 在不同设备浏览器上的表现非常不一致，尤其是Chrome端和ios端之间，差得非常多。需要自己确认下效果。比如背景色的设置等。(这一条的原理是：tailwind css是移动端优先 任何不指定Breakpoint的语法都是优先移动端 不需要sm:特别专指)

顺便放一个悬浮显示文字的css样式 来自菜鸟教程

    .tooltip {
        margin: 1rem;
        position: relative;
        display: inline-block;
        border-bottom: dashed;
        border-bottom-width: 4px;
        border-bottom-color: #0ea5e9; /* 这个颜色值是示例，实际值可能不同，需要查看你使用的 Tailwind CSS 版本的文档 */

    }

    .tooltip .tooltiptext {
        visibility: hidden;
        width: 150px;
        background-color: black;
        color: #fff;
        text-align:justify;
        border-radius: 6px;
        padding: 5px 5px;

        /* 定位 */
        position: absolute;
        z-index: 1;
    }

    .tooltip:hover .tooltiptext {
        visibility: visible;
    }

 部署

部署一个不带框架的纯静态的使用Tailwind Css的网站，可以使用cloudflare pages。

值得注意的是，其他settings都没什么，但是部署命令非常抽象，只需要tailwindcss -o dist/output.css --minify

联系github的话nodejs的module不用传，部署的时候应该会服务器端自己生成。