出现这个问题,你可能是用了tailwindcss4,改为tailwindcss3即可,例如: pnpm add tailwindcss@3 3.vue或者react项目按照官方配置好以后不生效 看看tailwind.config.js里面的content 有没有包括jsx vue tsx这样的一些文件后缀,例如:
配置Tailwind CSS 打开 tailwind.config.js 文件并修改为: 实例 /** @type {import('tailwindcss').Config} */ exportdefault{ content:[ "./index.html", "./src/**/*.{vue,js,ts,jsx,tsx}", ], theme:{ extend:{}, }, plugins:[], } 添加Tailwind 指令 在 src/assets 目录下创建一个 style...
main.ts中引入tailwind.css 配置完成后需要引入tailwindcss,修改src/main.ts内容如下: import'@/styles/tailwindcss.css';import'./assets/main.css'import{ createApp }from'vue'import{ createPinia }from'pinia'importAppfrom'./App.vue'importrouterfrom'./router'constapp =createApp(App) app.use(createPi...
main.ts中引入tailwind.css 配置完成后需要引入tailwindcss,修改src/main.ts内容如下: import '@/styles/tailwindcss.css'; import './assets/main.css' import { createApp } from 'vue' import { createPinia } from 'pinia' import App from './App.vue' import router from './router' const app =...
如果想丝滑滚动还要写一堆 js 代码,防抖啊,requestAnimationFrame又给整出来了,现在不要 998,只需一句 cssscroll-behavior: smooth,结合锚点即可实现,浏览器更懂浏览器。 此时一位路过的朋友提出兼容 IE8(大哥现在 2024 React 都 18 了,vue 都 3 了,全民 AI 时代您还搁这 IE。抗击旧世界残党我辈义不容辞...
Integrate Metronic & KTUI with Vue This guide will walk you through integrating Metronic and KTUI into your Vue project. Tailwind CSS is not required for this setup. 1 Navigate to Vue Project Navigate to your Vue project folder. cdyour-vue-project ...
import { createApp } from 'vue';import App from './App.vue';import './styles.css'; // 导入样式文件createApp(App).mount('#app'); 2.6、代码示例 现在可以在项目中使用 TailwindCSS 类,例如 text-center、bg-red-500 等。 <template>点我</template> 2.7、浏览器效果 默认效果 鼠标划上 鼠标点...
创建postcss.config.js文件,这里的配置主要是添加tailwindcss的插件,这样你编写的css才会被tailwindcss处理; 创建tailwind.config.js文件,主要进行扫描规则、主题、插件等配置。为了打包时TailwindCSS能生成对应的样式文件,需要在tailwind.config.js中正确配置content字段,如以下配置将扫描 src 目录下所有以 vue/js/ts/jsx...
/** @type {import('tailwindcss').Config} */exportdefault{content:["./index.html","./src/**/*.{vue,js,ts,jsx,tsx}",],theme:{extend:{},},plugins:[],} 在这个例子中,我们扩展了颜色配置,添加了一个名为primary的自定义颜色;同时扩展了字体配置,添加了一个名为sans的自定义字体。
npx tailwindcss init -p 修改tailwind.config.js ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'] CSS 中引入 Tailwind 创建./src/index.css 文件 并使用 @tailwind 指令来包含 Tailwind的 base、 components 和 utilities 样式,来替换掉原来的文件内容。