首页 > 其他分享 >tailwindcss学习:1. vue项目配置 tailwindcss

tailwindcss学习:1. vue项目配置 tailwindcss

时间:2024-09-06 11:16:05浏览次数:5  
标签:vue tailwind 配置 vscode tailwindcss unknownAtRules css

官网的配置是需要一个cli去生成一份CSS,我简单总结一下更加干货的配置办法:
1.pnpm i postcss autoprefixer typescript

2.配置 postcss.config.cjs

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
};

3. 执行 npx tailwindcss init

4.项目的src目录下新建 index.css,放入

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

5.我用的vscode,出现了 Unknown at rule @tailwindcss(unknownAtRules),我此时在

.vscode/settings.json 文件下加入:

{
    ....
    "css.lint.unknownAtRules": "ignore"
}

若没有这个文件,就手动创建一个,问题解决

 

在main.js/ts中引入这个css文件

此时再试试tailwindcss是否生效吧

标签:vue,tailwind,配置,vscode,tailwindcss,unknownAtRules,css
From: https://www.cnblogs.com/llcdbk/p/18399856

相关文章

  • CLion 配置 Qt 开发环境
    https://blog.csdn.net/theRavensea/article/details/136534197 录CLion配置Qt开发环境环境说明基本配置1.创建Qt项目2.设置CLion工具链3.配置外部工具一些问题的补充CLion配置Qt开发环境环境说明操作系统:Windows10CLion版本:2023.3.4CMake版本:3.27.7Qt6版本:6.6.2(......
  • 关于Vue2和Vue3的区别及组合式/选项式API区别——高频面试题
    1、vue2和vue3的区别以下包含但不仅仅只有这10条区别但是,在应对面试时,回答已经足够用了,这些也是vue2和vue3的主要区别CompositionAPIvsOptionsAPICompositionAPI:组合式APIOptionsAPI:选项式API——在vue2中使用它们两者在vue3中是组织代码的不同方式Vue3引入了Com......
  • Vue组件之间的传值
    一、父组件给子组件传值:prop1、父组件部分:在调用子组件的时候,使用v-bind将msg的值绑定到子组件上:parentMsg=“msg”<child-component:parentMsg="msg"></child-component>//引入子组件importchildComponentform'@component/childComponent'exportdefault{ //注册子......
  • 【Java】【SpringBoot】yml配置文件解析
    yml的常见配置可以详见官方文档。https://docs.spring.io/spring-boot/appendix/application-properties/index.html#appendix.application-properties.server服务器配置server:port:8080#端口servlet:context-path:/#应用程序上下文路径【设置访问路径前缀......
  • 了解VxLAN,学习静态/分布式VxLAN的配置
    VxLAN(VirtualExtensibleLAN)是一种网络虚拟化技术,用于在物理网络上创建虚拟网络。它主要用于在大规模数据中心环境中实现虚拟化网络的隔离和扩展。VxLAN通过在现有的IP网络上封装以太网帧来实现这一目标,从而使虚拟机(VM)能够跨物理主机和数据中心进行通信。VxLAN的基本概念VxLANHe......
  • vue+ThreeJS:从0 到1 搭建开发环境
    文章目录一、下载安装(懒人版)二、顺序安装1,下载安装nodejs2,安装vue-cli3,创建vue-three项目。4,安装threeJS5,安装elementUI(选装)最终package.json文件如下:本系列教程是在vue2.X的基础上加载threeJS程序,来开发各种示例程序。一、下载安装(懒人版)下载vue-three系统包,n......
  • 基于django+vue月知晓彩妆销售系统【开题报告+程序+论文】-计算机毕设
    本系统(程序+源码+数据库+调试部署+开发环境)带论文文档1万字以上,文末可获取,系统界面在最后面。系统程序文件列表开题报告内容研究背景在当今快节奏与高度个性化的消费市场中,彩妆行业以其丰富多样的产品和不断创新的趋势蓬勃发展。随着消费者对美的追求日益提升,彩妆产品的选......
  • 基于django+vue远程就医问诊系统【开题报告+程序+论文】-计算机毕设
    本系统(程序+源码+数据库+调试部署+开发环境)带论文文档1万字以上,文末可获取,系统界面在最后面。系统程序文件列表开题报告内容研究背景随着信息技术的飞速发展和互联网应用的普及,远程就医问诊系统应运而生,成为解决医疗资源分布不均、患者就医难问题的有效途径。传统医疗模式......
  • 基于django+vue员工信息管理系统【开题报告+程序+论文】-计算机毕设
    本系统(程序+源码+数据库+调试部署+开发环境)带论文文档1万字以上,文末可获取,系统界面在最后面。系统程序文件列表开题报告内容研究背景随着企业规模的日益扩大,员工数量激增,传统的人工管理方式已难以满足现代企业对高效、精准、实时信息管理的需求。员工信息管理作为企业日常......
  • openEuler服务器bond配置
    网卡bond就是通过把多个网卡绑定为一个逻辑网卡,实现网口冗余、负载均衡,增加服务器的可靠性、稳定性,提高网络带宽。本文将详细介绍命令行下配置bond。1.使用nmcli命令创建bond0,自动生成配置文件nmcliconnectionaddtypebondifnamebond0mode0在/etc/sysconfig/networ......