TailwindCSS在vite项目中的安装与使用

2024-05-14 15:52

本文主要是介绍TailwindCSS在vite项目中的安装与使用,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

一、Tailwind CSS工作原理

  • Tailwind CSS 的工作原理是扫描所有 HTML 文件、JavaScript 组件和任何其他类名称模板,生成相应的样式,然后将它们写入静态 CSS 文件。
  • 它快速、灵活且可靠 — 具有零运行时间。

二、安装必要依赖

        Vite创建的项目默认集成了PostCSS,而TailwindCSS本身就是一个PostCSS插件,所以直接使用即可。

pnpm install -D tailwindcss postcss autoprefixer
# yarn add -D tailwindcss postcss autoprefixer
# npm install -D tailwindcss postcss autoprefixer

三、使用初始化命令创建TailwindCSS配置文件

npx tailwindcss init

这一命令会做两件事:

  1. 创建postcss.config.js文件,这里的配置主要是添加tailwindcss的插件,这样你编写的css才会被tailwindcss处理 -- 亲测 我这里完成第六步操作才生效

  2. 创建tailwind.config.js文件,主要进行扫描规则、主题、插件等配置。

         为了打包时TailwindCSS能生成对应的样式文件,需要在tailwind.config.js中正确配置content字段,如以下配置将扫描 index.html 文件以及 src 目录下所有以 vue、js、ts、jsx、tsx 结尾的文件。

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

 四、创建tailwind.css文件,引入基本命令

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

 五、在入口文件main.ts中引入

 踩坑一:如果项目中单独引入了全局样式文件,那么上面创建的tailwind.css文件在引入时务必放在全局样式文件上面,否者Tailwindcss不会生效。如下:

 六、vite.config.ts增加配置

踩坑二:在这里必须要配置一下 Tailwindcss 才生效;

import tailwindcss from 'tailwindcss'
import autoprefixer from 'autoprefixer'export default defineConfig({css: {postcss: {plugins: [tailwindcss, autoprefixer],},},
})

大功告成!开始使用!

<template><div class="w-120 h-30 bg-blue-500 text-4xl">Hello! Tailwind CSS~</div>
</template>

        

        TailwindCSS语法检索技巧: TailwindCSS的基本原则是将每一个style语法转换为一个class,因此,在官网检索想要的样式class时,按照样式的语法来检索是效率最高的。如想要获取字体大小的语法,只需要搜索 fontsize 即可:

这篇关于TailwindCSS在vite项目中的安装与使用的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/989179

相关文章

TX2 关闭console serial使用该串口

由于项目变更,GPU型号从Tx1变成Tx2,原来的硬件接口没有变,但是把原来UART0的console serial功能关闭变成一个串口使用的方法没法使用了。这就导致了数据通过该串口发送的数据变的很有问题,无法使用了。 经过测试,终于找到了解决的方法。 首先在虚拟机上,安装编辑设备树的软件: $sudo apt-get update $sudo apt-get install device

Tx1内存不足安装opencv4.0

tx1的内存只有16个G,安装opencv和opencv_contrib内存就不够用了。于是,我就用外界SD卡的形式进行安装。在make的时候,到40%时,出现了错误:cmake_symlink_library: System Error: Operation not supported。网上查找原因,说是:创建链接不成功,要确认当前帐户下是否有权限在编译的目录中有创建链接的权限。 网上给出的解

matlab sift算法使用的记录

最近在做个三维建模的东西,用到了sift算子,需要在matlab上使用。网上介绍使用了 David Lowe的源代码。源码地址为: http://www.cs.ubc.ca/~lowe/keypoints/ 在使用的过程中,会出现以下错误: 不知道是为什么,在一片博客中看到图像大小大致要800*600的说明,我就猜想是不是因为我的图像太大了。原始图像3000*1200的,于是我就把图

Ubuntu 16.04 Qt5安装qtcharts

Qtcreator5.5安装qchart,首先下载qtcharts,然后进入该路径下,qmake一下。 $git clone https://github.com/qtproject/qtcharts.git $cd qtcharts $qmake 这时会出现问题是’qtConfig’ is nit a recongnized test function 这时输入: $git che

linux安装QtCreator出现undefined reference to 'drmCloseOnce'

在Jetson tx1 上安装了ubuntu16.04系统,然后安装QtCreator时出现undefined reference to `drmCloseOnce`,/usr/lib/aarch64-linux-gnnu/libGL.so的错误。   解决方法,把链接重新指向: $cd /usr/lib/aarch64-linux-gnu $sudo rm libGL.so $sud

JetSon Tx1 串口使用记录

最近在学习使用Jetson Tx1,下面是使用串口遇到的问题,做为我的第一篇博客。 Jetson Tx1串口是TTL电平。 Jetson Tx1的UART0在Linux上的设备号是“/dev/tty0”,但是在Tx1刷的系统中,UART0默认是做为console serail设备使用的,这个具体有什么作用,我也不大清楚了,百度一下也不是很懂。这就导致了在Linux上使用串口调试工具和PC机相连

使用import和exec运行模块文件的异同

使用import和exec运行模块文件的异同 实例代码 #script1.pyimport sysprint(sys.platform)x = 'span'print(x*8) 在cmd中 >>> import script1win32spanspanspanspanspanspanspanspan >>> exec(open('script1.py').read())win

在Ubuntu 12.04 LTS上安装Python3.4.x

在Ubuntu 12.04 LTS上安装Python3.4.x 想重新把python捡起来继续学习,顺便学习下linux的基本操作,所以在ubuntu上面配置了一下python3的环境,找了不少教程,找到一篇很不错的! 原文链接在Ubuntu 12.04 LTS上安装Python3.3.x 我的python版本是3.4.2,根据教程配置成功。 Python3.3.2是Python3最

Android Studio 下项目的依赖配置

Android Studio 下项目的依赖配置 背景 项目需要用到一个github上的开源库swipelistview,原来在eclipse环境下配置过相关的依赖(导入jar包或者是lib依赖),但是在Android Studio下还是没有操作过。上网查了一下相关的资料,在stackoverflow上找到了答案。根据上面的介绍,结合实际情况,完成了依赖配置。 stackoverflow答案

vue dist文件打开index.html报Failed to load resource: net::ERR_FILE_NOT_FOUND

本地正常。打包好的dist文件打开index.html报Failed to load resource: net::ERR_FILE_NOT_FOUND 解决办法: 在webpack.prod.conf.js 中output添加参数publicPath:’./’ 在webpack.base.conf.js里 publicPath: process.env.NODE_ENV === ‘pro