Vue3集成tailwind CSS

Tailwind Css是一个由js编写的css框架，他是基于postcss去解析的。

对于tailWindcss插件的使用，需要做如下步骤：

1. PostCss配置文件postcss.config.js，新增tailwindcss插件。
2. TailWindCss插件需要一份配置文件，比如：tailwind.config.js

安装VScode插件

安装tailwind css插件以及其他依赖项

npm install -D tailwindcss postcss autoprefixer

生成配置文件

npx tailwindcss init -p

执行这条命令会在项目的根目录创建postcss.config.js和tailwind.config.js两个配置文件。如下所示：

tailwind.config.js

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

postcss.config.js

export default {
  plugins: {
    tailwindcss: {},
    autoprefixer: {}
  }
}

添加 tailwind.config.js 文件中所有模板文件的路径。

export default { 
    content: [
        "./index.html", 
        "./src/**/*.{js,ts,jsx,tsx}",
    ], 
}

项目的src/styles目录下创建一个tailwind.css，然后styles/index.scss中引入

@tailwind base;
@tailwind components;
@tailwind utilities;

使用

<template>
  <div class="w-screen h-screen flex justify-content item-center text-6xl text-red-500">
    hello TailwindCss
  </div>
</template>

<script setup lang='ts'></script>

<style lang='scss' module="dt"></style>

运行项目

npm run dev