切图崽的福音！Tailwind CSS框架帮助你快速制作一个精美的页面

想看看大家一般是怎么做一个页面的？是不是和我一样，每到写页面的时候就挠破脑袋，又是要想类名的，又是要想具体的样式的，完成一个页面的基本功能很快，但是想要制作一个精美的页面就要很长时间了，因为大部分时间都是在写样式！这篇文章我将分享一下我刚学到的Tailwind CSS框架，实在是好用的不要不要的！

什么是Tailwind CSS？

Tailwind CSS 是一款高度可定制的实用主义 CSS 框架，专为快速构建现代网站和应用程序而设计。与传统的CSS框架（如Bootstrap或Bulma）相比，Tailwind采取了一种截然不同的方法，即“实用类优先（Utility-First）”的设计哲学。这意味着，它不提供现成的UI组件，而是提供了一套丰富的低级CSS工具类，开发者可以直接在HTML中使用这些类来快速实现设计效果，无需编写大量自定义CSS代码。

大家可以试想一下自己以前通过传统的CSS修改样式是怎么做的？

<div class="flex-container">
    <h1>HELLO</h1>
    <nav>
        <a href="#">首页</a>
        <a href="#">服务</a>
        <a href="#">联系我们</a>
    </nav>
</div>

我们想让这段HTML的页面效果变得好看点，我们就需要拿到这个类进行编写样式

.flex-container {
  display: flex;
  flex-wrap: nowrap; 
  position: fixed; 
  width: 100%;
  align-items: baseline; 
  top: 0; 
  padding-left: 1.5rem; 
  padding-right: 1.5rem; 
  padding-top: 1rem; 
  padding-bottom: 1rem;
  background-color: #f3f4f6; 
}

但是如果我们使用Tailwind CSS框架的话就会发现很快就可以完成这个效果了！

<div class="flex flex-nowrap fixed w-full items-baseline 
            top-0 px-6 py-4 bg-gray-100">
    <h1>HELLO</h1>
    <nav>
        <a href="#">首页</a>
        <a href="#">服务</a>
        <a href="#">联系我们</a>
    </nav>
<div>

不信你们可以去看看！不过我想你们应该看不太到，因为这个要进行配置得嘞！hhhhh

vue 中引入Tailwind CSS

我们需要使用它就要先安装下载它及其依赖。我们在终端中输入这段命令行

npm install -D tailwindcss@latest postcss@latest autoprefixer@latest

然后再初始化他！

npx tailwindcss init -p

初始化后就会生成两个文件：tailwind.config.js用于配置Tailwind CSS，postcss.config.js用于配置PostCSS。

我们需要在tailwind.config.js添加以下内容来确保Webpack加载器能处理Tailwind CSS

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./index.html",
    //  任何层级的文件
    "./src/**/*.{js,vue,jsx,tsx}"
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

然后再全局样式文件（通常是src/assets/styles/main.css或src/styles/main.scss）中，引入Tailwind CSS。

@import 'tailwindcss/base';
2@import 'tailwindcss/components';
3@import 'tailwindcss/utilities';

现在我们就可以在我们的vue文件项目中使用它了。

如何使用它

使用它就比较简单了，就是跟上面演示的一样，直接在类名中写想要实现的样式了。在这里就不演示了，省的说我水字数，以后在具体的实战项目中应用它。如果想看的话就赶紧给我关注一下。哈哈哈哈哈哈。

写在后面的话

这个对于熟知css的朋友有一定的优势，随便看看就能理解了。如果还不太熟悉的可以去他们的官方文档看看。Tailwind CSS的官方文档，从这里面可以获取更多详细信息和高级配置选项。