1.2 打开 tailwind.config.cjs文件 /** @type {import('tailwindcss').Config}*/module.exports={//Specify the file formats where tailwind shoudl workcontent: ["./src/**/*.{html,js,jsx,tsx,vue}"], theme: { extend: {}, }, plugins: [], } 打开style.css @tailwindbase; @tailwind comp...
@tailwind components; @tailwind utilities; 如果出现一下的问题 则需要修改vscode的setting.json文件,填加 "css.lint.unknownAtRules": "ignore" 然后保存即可 6.最后一步,将src/tailwind.css引入到src/main.js下 重新启动项目 即可
其实在rollup配置的时候就已经配置了处理tailwindcss功能,我们加入tailwind样式就可以 (1).在/src/main.css引入tailwindcss内置样式 @import "tailwindcss/base"; @import "tailwindcss/components"; @import "tailwindcss/utilities"; ps:这里其实还有个[黑魔法] 你甚至可以在组件库编写tailwinds的样式(下面举例[....
生成tailwind.config.js 和 postcss.config.js 文件 npx tailwindcss init -p 修改tailwind.config.js ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'] CSS 中引入 Tailwind 创建./src/index.css /* ./src/index.css */ @tailwind base; @tailwind components; @tailwind utilities; 确保CSS ...
接下来,你需要在项目的入口样式文件中(例如 src/assets/main.css 或src/styles/main.css)引入 Tailwind 的基础、组件和工具类。 css /* src/assets/main.css */ @tailwind base; @tailwind components; @tailwind utilities; 然后,在你的 Vue 3 项目的入口文件(例如 src/main.js 或src/main.ts)中引入这...
tailwindcss: {}, autoprefixer: {}, }, } image.png 接下来是使用 我们可以在src/目录下面的index.css文件中引入类 @tailwind base; @tailwind components; @tailwind utilities; 这时候记得在main.js里面引入一下你的index.css 然后我们就可以在vue文件里面使用了...
@tailwind base; @tailwind components; @tailwind utilities; 1. 2. 3. 在main.ts 引入 最后npm run dev 就可以使用啦
6.组件加入 tailwindcss 其实在 rollup 配置的时候就已经配置了处理 tailwindcss 功能,我们加入 tailwind 样式就可以 \ (1).在/src/main.css 引入 tailwindcss 内置样式 @import"tailwindcss/base";@import"tailwindcss/components";@import"tailwindcss/utilities"; ...
@tailwind base; @tailwind components; @tailwind utilities; 之后,终端运行npm run dev,就能开始使用 Tailwind CSS 。 二、使用@符号 Vue3 是默认不支持@符号表示src的,如果想向Vue2一样使用的话需要一些配置。 npm i path npm i @types/node // 不加这个 __dirname 会报异常 在vite.config.js进行配置。
@import 'tailwindcss/base';@import 'tailwindcss/components';@import 'tailwindcss/utilities';/* 其他 CSS 文件的导入 */ 2.5、在 main.js 文件中,将 tailwind.css文件导入到项目中 import { createApp } from 'vue';import App from './App.vue';import './styles.css'; // 导入样式文件createApp...