Tailwind CSS指南

使用和配置 Tailwind CSS 的完整指南

Tailwind CSS 是一个功能类优先的 CSS 框架,允许你快速构建现代的网站。它提供了一组预定义的实用工具类,可以直接在 HTML 中使用,以实现各种样式效果。本文将详细讲解如何使用和配置 Tailwind CSS,并介绍其主要原理。

这里写目录标题

  • 使用和配置 Tailwind CSS 的完整指南
    • 1. 安装 Tailwind CSS
      • 1.1 使用 CDN
      • 1.2 npm安装
      • 1.3 安装tailwind依赖项的作用
    • 2.配置流程
      • 2.1初始化:
      • 2.2 CSS 输入文件:
      • 2.3 导出CSS文件
    • 3.启动服务
    • 4. 总结

1. 安装 Tailwind CSS

1.1 使用 CDN

如果你只是想快速试用 Tailwind CSS,可以使用 CDN。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"><title>Tailwind CSS</title>
</head>
<body><h1 class="text-3xl font-bold underline">Hello, Tailwind CSS!</h1>
</body>
</html>

1.2 npm安装

对于更复杂的项目,可以通过 npm 安装 Tailwind CSS 及其依赖项。

npm install tailwindcss postcss autoprefixer
npx tailwindcss init

1.3 安装tailwind依赖项的作用

Tailwind CSS 需要编译过程来生成最终的 CSS 文件,并导入HTML中发挥作用。在使用 Vite 这样的构建工具时。编译过程可以通过 PostCSS 插件在构建时动态生成所需的样式,确保只包含实际使用的 CSS 类,从而减少文件大小并提高性能。

PostCSS:作为一个 CSS 处理工具,本身不做任何的转换,而是起到一个指挥的作用,管理和应用各种插件来转换和优化 CSS。允许你通过插件对 CSS 进行转换和优化。(Tailwind也是一个CSS插件)

Autoprefixer:作为 PostCSS 的插件,自动为 CSS 规则添加浏览器前缀,确保不同浏览器之间css属性的兼容性。

2.配置流程

2.1初始化:

  1. 你在项目中安装并配置 Tailwind CSS、PostCSS 和 Autoprefixer
  2. tailwind.config.js用于配置 Tailwind CSS,如内容路径、主题扩展等
// tailwind.config.js
module.exports = {content: ['./index.html','./src/**/*.{vue,js,ts,jsx,tsx}',],theme: {extend: {colors: {customColor: '#123456',},spacing: {'72': '18rem','84': '21rem','96': '24rem',},},},plugins: [require('@tailwindcss/forms'),//改进表单样式的插件。],function({ addUtilities }) {//创建自定义指令addUtilities({'.custom-utility': {'background-color': '#123456','padding': '10px',},})
}
  1. postcss.config.js 用于配置 PostCSS 插件,如Autoprefixer。
//格式 0(ES6风格)
import postcssImport from 'postcss-import';
import postcssPresetEnv from 'postcss-preset-env';
import autoprefixer from 'autoprefixer';export default {
plugins: [postcssImport(),postcssPresetEnv({ stage: 1 }),autoprefixer()
]
};//格式一(对象风格)
module.exports = {
plugins: {// 空对象 对应 默认配置tailwindcss: {},autoprefixer: {},
},
}//格式二(函数风格)
module.exports = {
plugins: () => [require('tailwindcss')('./tailwind.config.js'),require('autoprefixer'),// ... 其他插件
]
}//格式三(不推荐)
module.exports = {
plugins:  [require('tailwindcss')('./tailwind.config.js'),require('autoprefixer'),// ... 其他插件
]
}

2.2 CSS 输入文件:

你创建一个 CSS 输入文件(例如 src/index.css),并导入 Tailwind 的基础样式、组件样式和实用程序样式。

/* src/index.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

2.3 导出CSS文件

// src/main.js
import './index.css';
import { createApp } from 'vue';
import App from './App.vue';createApp(App).mount('#app');

3.启动服务

  • 当你运行开发服务器或构建生产版本时,Vite 会调用 PostCSS 处理你的 CSS 文件。
  • PostCSS 读取你的 CSS 文件,应用配置的插件(包括 Tailwind CSS 和 Autoprefixer)。
  • Tailwind CSS 插件扫描你的项目文件(HTML、JavaScript、Vue、React 等),生成对应的 CSS 类。
  • Autoprefixer 插件为生成的 CSS 自动添加必要的浏览器前缀。
  • 处理后的 CSS 文件会被注入到你的项目中,确保你使用的 Tailwind CSS 类和样式在所有目标浏览器中都能正常工作。

4. 总结

  • PostCSS 插件
    Vite 使用 PostCSS 插件处理 CSS 文件。在构建过程中,PostCSS 解析你的 CSS 文件并将其转换为 Tailwind CSS 样式。

  • JIT 模式
    Tailwind CSS 的 JIT 编译模式可以在开发过程中动态生成所需的样式类。这意味着只会生成你实际使用到的 CSS 类,从而减小最终的 CSS 文件大小并提高性能。并且Tailwind CSS 提供了方便的响应式设计工具。你可以通过添加断点前缀来指定不同屏幕尺寸下的样式。

  • 配置文件
    通过配置文件 tailwind.config.js,你可以自定义 Tailwind CSS 的行为和样式。例如,你可以添加自定义颜色、调整间距和扩展默认的主题。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/47535.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

spark的相关知识点

2024.6.19 1.scala&#xff1a;语言 2.spark&#xff1a;框架&#xff08;jar包&#xff09; 3.spark streaming&#xff1a;kafka 4.spark mlib&#xff1a;机器学习 算法 5.解释 Class&#xff1a;类Case Class&#xff1a;样例类Object&#xff1a;对象User&#xff1a;类Ne…

阿里云国际站:海外视频安全的DRM加密

随着科技的进步&#xff0c;视频以直播或录播的形式陆续开展海外市场&#xff0c;从而也衍生出内容安全的问题&#xff0c;阿里云在这方面提供了完善的内容安全保护机制&#xff0c;适用于不同的场景&#xff0c;如在视频安全提供DRM加密。 由图可以了解到阿里云保护直播安全的…

Electron 应用关闭突出程序坞

在Electron应用中,处理窗口关闭并使其最小化到Mac系统的程序坞(Dock)而不是完全退出应用,通常涉及到监听窗口的关闭事件(close事件)并在适当时机阻止其默认行为。以下是一些步骤和关键点,帮助实现这一功能: 1. 监听窗口关闭事件 在Electron的主进程(main process)中…

请求通过Spring Cloud Gateway 503

最近想处理一个通用的网关服务。 但是我在处理好所有配置的时候发现&#xff0c;网络请求过网关的时候&#xff0c;一直503&#xff0c;我所有的配置都没问题。 环境&#xff1a; JDK&#xff1a; 17 Spring Cloud: 2023.0.2 在 Spring Cloud Gateway 的早期版本中&#xff…

如何应用CDP做好客户标签管理?

​标签是对客户的特征标识&#xff0c;是经过人为再加工后的结果&#xff0c;相对于传统意义的标签&#xff0c;CDP客户数据平台更侧重于客户动态的行为&#xff0c;标签的加工随着用户行为的变化实时更新&#xff0c;帮助客户捕捉用户每个阶段的动态特征与需求。 如何应用CDP做…

【ROS】的软件包应用商店使用-以小乌龟为例

文章目录 环境效果图介绍安装使用总结 环境 在Ubuntu20.04系统下运行 效果图 介绍 ros应用商店&#xff0c;里面有大量ros可使用的软件。 下面以ros经典的控制小乌龟为例。 安装 安装控制器 sudo apt install ros-noetic-rqt-robot-steering安装小乌龟 sudo apt insta…

Spring中事务是如何实现的?

在Spring中&#xff0c;事务管理是通过AOP&#xff08;面向切面编程&#xff09;和代理模式实现的。Spring提供了声明式事务管理&#xff0c;允许开发者通过简单的配置来管理事务&#xff0c;而不需要手动编写事务管理的代码。 概述&#xff1a; 1.Spring事务底层是基于数据库事…

微软GraphRAG +本地模型+Gradio 简单测试笔记

安装 pip install graphragmkdir -p ./ragtest/input#将文档拷贝至 ./ragtest/input/ 下python -m graphrag.index --init --root ./ragtest修改settings.yaml encoding_model: cl100k_base skip_workflows: [] llm:api_key: ${GRAPHRAG_API_KEY}type: openai_chat # or azu…

uniapp踩坑之项目:uni-table垂直居中和水平居中

uni-table 中的水平居中uni-td align"center"&#xff0c;css里的属性vertical-align: middle //html 水平居中<uni-table ref"table" :loading"loading" border stripe emptyText"暂无更多数据"><uni-tr><uni-th :wid…

[HDCTF2019]MFC

[HDCTF2019]MFC-CSDN博客 不会写 完全画瓢 我还以为win32什么系统逆向 原来是小瘪三! VM保护 下载xspy(看雪上有) 打开32位的 再打开 这个窗口 把这个放大镜托到这个大窗口(里面有个小窗口,不要托错了) 下面这个 onmeg 就她不正常,是什么0464 #include <stdio.h&g…

mac环境下安装python3的图文教程

Python 是一种功能多样且强大的编程语言&#xff0c;在各个领域得到广泛应用。许多 Mac 用户都在其设备上安装和运行 Python&#xff0c;以运行特定的应用程序或创建、运行自己的 Python 脚本。 文章源自设计学徒自学网-http://www.sx1c.com/49441.html 虽然某些版本的 macOS…

GO——GMP 好文整理

GMP相关好文推荐&#xff1a; Golang 调度器设计思想、GMP 协程调度模型详解 Golang的协程调度器原理及GMP设计思想 Golang调度器GMP原理与调度全分析

lua 游戏架构 之 资源加载 LoaderManager (一)

定义一个 LoaderManager class&#xff0c;用于管理各种资源加载器。它使用了对象池&#xff08;Object Pool&#xff09;来优化资源加载器的创建和销毁&#xff0c;从而提高性能 举例定义一个 PrefabLoader --[[Desc: 封装AAS的接口&#xff0c;加载Prefab --]]---alias Pre…

STM32判断休眠

STM32是否进入休眠模式(或称为睡眠模式)的判断主要基于其功耗状态、内部时钟的关闭情况以及唤醒后的行为。以下是根据参考文章提供的信息,判断STM32是否进入休眠模式的方法: 功耗状态: STM32在休眠模式下,功耗会显著降低。这是因为休眠模式仅关闭了内核时钟,但外设仍然保…

MySQL 实现模糊匹配

摘要&#xff1a; 在不依赖Elasticsearch等外部搜索引擎的情况下&#xff0c;您依然能够充分利用MySQL数据库内置的LIKE和REGEXP操作符来实现高效的模糊匹配功能。针对更为复杂的搜索需求&#xff0c;尤其是在处理大型数据集时&#xff0c;结合使用IK分词器&#xff08;虽然IK…

ubuntu 通讯学习笔记

1.ubuntu ping6 详解 ping6 是用于测试IPv6网络连接的工具。在 Ubuntu&#xff08;以及其他 Linux 发行版&#xff09;中&#xff0c;你可以使用 ping6 命令来发送 ICMPv6 Echo 请求到指定的 IPv6 地址&#xff0c;以检测网络连接是否正常。 以下是 ping6 命令的一些基本用法…

git镜像链接

镜像链接https://registry.npmmirror.com/binary.html?pathgit-for-windows/ CNPM Binaries Mirror 1.git init 2.克隆 IDEA集成git git分支

Docker配置正向代理

服务器使用正向代理访问互联网&#xff0c;Docker 也需要配置使用这个代理。可以通过以下步骤配置 Docker 使用 HTTP 和 HTTPS 代理&#xff1a; 1. 配置 Docker 使用代理 创建或编辑 Docker 的配置文件 /etc/systemd/system/docker.service.d/http-proxy.conf 和 /etc/syste…

RDD算子---->coalesce和repartition的区别

1.coalesce() 作用&#xff1a;缩减分区数&#xff0c;用于大数据集过滤后&#xff0c;提高小数据集的执行效率。 需求&#xff1a;创建一个4个分区的RDD&#xff0c;对其缩减分区 #1.创建一个RDD rdd1 sc.parallelize(range(1,11),4) #2.对RDD重新分区 rdd2 rdd1.coalesc…

【CICID】GitHub-Actions-SpringBoot项目部署

[TOC] 【CICID】GitHub-Actions-SpringBoot项目部署 0 流程图 1 创建SprinBoot项目 ​ IDEA创建本地项目&#xff0c;然后推送到 Github 1.1 项目结构 1.2 Dockerfile文件 根据自身项目&#xff0c;修改 CMD ["java","-jar","/app/target/Spri…