tailwindcss学习02

vue中接入tailwindcss

使用cmd不要使用powershell

npm create vite@latest stu02 -- --template vue
cd stu02npm install --registry http://registry.npm.taobao.org
npm install -D tailwindcss@3.4.17 postcss autoprefixer --registry http://registry.npm.taobao.org
npx tailwindcss init -p
# 展示全部配置
# npx tailwindcss init -p -full

修改tailwindcss.config.js

/** @type {import('tailwindcss').Config} */
export default {content: ["./index.html","./src/**/*.{vue,js,ts,jsx,tsx}",],theme: {extend: {},},plugins: [],
}

修改style.css

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

运行项目

npm run dev

修改App.vue

<script setup>
</script><template><h1 class="text-3xl font-bold underline">Hello world!</h1>
</template><style scoped></style>

结果

参考

https://www.tailwindcss.cn/docs/guides/vite#vue