taiwindcss

1.安装

npm install -D tailwindcss postcss autoprefixer

npx tailwindcss init

这会创建一个 tailwind.config.js 文件。注意：一定通过px tailwindcss init方式创建

2.tailwind.config.js

module.exports = {
  content: [
    './index.html',
    './src/**/*.{js,ts,jsx,tsx,vue}', // 确保 Vue 文件被扫描
  ],
  theme: {
    extend: {},
  },
  p

3.src/assets/tailwind.css

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

4.main.ts

import './assets/tailwind.css' // 引入 Tailwind CSS 样式文件

5.因为tailwindcss是依赖于postcss

创建postcss.config.js

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

6.问题，如果这几个步骤发现没有实现，删除包以后重新试一下

    <div class=" bg-red-900 w-[100px] h-[100px] text-[red]">
        大屏
    </div>

原文地址：https://blog.csdn.net/qq_34569497/article/details/144668119

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！