正在进入ing...

vite项目安装 tailwindcss

发布时间:2022-09-01 浏览量: 134 文章分类: 前端相关

前言

关于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类名进行提取组件。