首页 > 其他分享 >开局就集成tailwindcss(一)

开局就集成tailwindcss(一)

时间:2023-10-11 16:46:21浏览次数:44  
标签:集成 开局 cli tailwind 插件 tailwindcss postcss css

1.使用cli创建项目

npm create vite@latest 项目名 --template react-ts

 

2.因为css功底偏弱,所以必须也是完全有必要的,在这里必须集成一下tailwind css,

npm install tailwindcss autoprefixer postcss-cli
# 额外的安装2个配套的插件
# autoprefixer  自动添加样式的前缀,很有必要,类似 --webkit这种,
# postcss-cli 它可以加载不同的插件并对CSS进行各种转换、优化和处理。

安装完之后,在根目录下新建一个postcss.config.js,内容如下

 

3.接下来根据tailwind的官网链接 的操作,初始化tailwind

npx tailwindcss init 

 执行之后发现多了一个tailwind.config.js 文件,这还没结束,配置下规则,支持我们的tsx文件

 这里偷个懒,直接放到index.css里,规范点应该提出去,后续再优化,已经迫不及待的要尝鲜

 

 最后效果如下

 

标签:集成,开局,cli,tailwind,插件,tailwindcss,postcss,css
From: https://www.cnblogs.com/qh1688/p/17757581.html

相关文章

  • 如何将海康、大华、TP等监控摄像头、硬盘录像机的监控视频集成到网页中无插件播放,实现
    方法介绍今天我们介绍一个开放的监控接入平台NTVGBS,可以轻松实现将监控摄像头或录像机的监控视频信号集成到网页或APP中,并提供云台控制、录像回看等高级功能。NTVGBS是一款非常规范好用的开放监控平台,平台支持GB28181国标、RTMP/RTSP直播推送和ONVIF等开放规范,如果您有摄像头或......
  • java RestTemplate集成HttpClient池化及异常重试
    解决存在网络隔离,首次连接请求被拒绝情况SocketException首次请求超时情况SocketTimeoutException无返回数据清空NoHttpResponseException进行重试importorg.apache.http.HttpEntityEnclosingRequest;importorg.apache.http.NoHttpResponseException;importorg.apache.htt......
  • Jenkins集成newman
    一、Docker环境准备二、Jenkins环境准备三、登录Jenkins安装NodeJs插件四、Jenkins全局工具配置Nodejs五、创建Jenkins自由风格项目构建步骤1:选择ExecuteNodeJSscript构建步骤2:选择执行shell脚本六、将postman相关的脚本、环境变量数据、全局变量数据等拷贝到Jenki......
  • Flutter module集成到Android原生项目报错
    使用AAR方案集成遇到两个诡异错误环境:Flutter(Channelstable,3.3.10,onmacOS13.5.222G91darwin-x64,localezh-Hans-CN)AndroidStudio(version2022.3)Androidtoolchain-developforAndroiddevices(AndroidSDKversion34.0.0)参考文档en参考文档zh......
  • iOS原生集成Cordova后再集成插件流程
    假设你已经在原生工程(取名native)上成功集成Cordova,参考官方文档往项目再集成插件步骤如下使用Cordova创建一个新iOS项目(取名demo)在demo里面安装你想要的插件,以device为例cordovapluginaddcordova-plugin-device这时我们发现demo工程里成功安装了device插件,接下来我......
  • AWS的cognito集成第三方登录
    Cognito代替本地数据库进行登录这一步应该是基础,这两天给我脑子搞浑了,但是基本上都会用的到的我实现的方法是使用aws-amplify参照AWScognito的文档日了够了这是文档等哪天想动的时候再整理,还需要把登录相关的一些概念了解一下......
  • SpringBoot集成WebSocket讲解
    目录1WebSocket1.1简介1.2WebSocket作用和调用1.2.1作用1.2.2js端调用1.3Javax1.3.1服务端1.3.1.1服务端接收1.3.1.2服务端集成1.3.1.3ping和pong消息1.3.2客户端1.3.2.1客户端接收1.3.2.2客户端发送1.4WebMVC1.4.1服务端1.1.4.1服务端接收1.1.4.2服务端集成1.1......
  • 深度解析集成服务云的多重启动机制:数据集成更智能,业务流畅畅行无阻
    集成方案的“点火”时刻!花式启动数据集成在这篇文章中,我们将探讨轻易云集成服务云的集成方案启动机制,以助您在企业数据集成中灵活应对各种需求,确保数据自由流动。启动方案是什么启动方案是指集成方案启动执行的方式。轻易云集成服务云提供了四种启动方式,包括人工启动、定时启......
  • 泛微OA与ERP集成的关键要点
    泛微OA办公系统与ERP系统的集成是为了实现企业内部各个系统之间的数据共享和协同工作,提高工作效率和管理水平。下面将详细介绍泛微OA办公系统如何与ERP系统集成以及轻易云数据集成平台在该过程中发挥的重要作用。集成方式泛微OA办公系统与ERP系统的集成可以采用多种方式实现......
  • 造轮子之ORM集成
    Dotnet的ORM千千万,还是喜欢用EFCORE前面一些基础完成的差不多了,接下来可以集成数据库了,官方出品的ORM还是比较香。所以接下来就是来集成EFCORE。安装包首先我们需要安装一下EFCORE的NUGET包,有如下几个:Microsoft.EntityFrameworkCore.ProxiesMicrosoft.EntityFrameworkC......