前言

关于tailwindcss的介绍我就不多说了，这玩意真不错。不太熟悉的可以去网上看看。个人理解只要经常使用，还是可以很快上手的。

安装使用

• 在项目中运行 npm install -D tailwindcss postcss autoprefixer
• 执行npx tailwindcss init -p,会再项目根目录下创建tailwind.config.js文件，该文件为tailwindcss的配置文件。 文件默认样式如下

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [],
  theme: {
    extend: {},
  },
  plugins: [],
}

还需要在content里面写入tailwind的应用范围

/** @type {import('tailwindcss').Config} */
module.exports = {
  // tailwind的应用范围
  content: ['./index.html', './src/**/*.{vue,js}'],
  theme: {
    extend: {},
  },
  plugins: [],
}

• 引入tailwind样式 创建src/styles/index.scss文件，并写入下面的样式引入。

// 导入tailwind 的基础指令组件
@tailwind base;
@tailwind components;
@tailwind utilities;

在需要main.js中引入我们创建的src/styles/index.scss文件。

如果在运行的时候报错，提示Preprocessor dependency "sass" not found. Did you install it? [vite] Internal server error: Preprocessor dependency "sass" not found. Did you install it?还需要我们在安装sass,可以执行npm i -D sass 然后重启项目，就安装成功了。

初体验

将你的App.vue文件内容删除并替换成如下内容，并启动项目。

<template>
  <div class="bg-slate-800 rounded-xl p-8 md:flex md:p-0">
    <img
      class="w-24 h-24 rounded-full mx-auto md:w-48 md:h-auto md:rounded-none"
      src="./assets/vue.svg"
    />
    <div class="pt-6 text-center space-y-4 md:p-8 md:text-left">
      <p class="text-lg font-medium text-zinc-100">
        "这是使用tailwindcss"来实现的一个基础卡片区域
      </p>
    </div>
  </div>
</template>

<script setup></script>

去浏览器拖拽缩放看看效果吧。

原子化css问题

截止到上面其实已经实现了tailwindcss的引入和使用，但是tailwind这样使用的话，会出现大量的类名，后续在重构、阅读都会很乱，很难实现可维护。

tailwindcss还推出了@apply指令，我们可以将很长复杂的css类名进行提取组件。