Tailwind CSS的介绍和使用

最新推荐文章于 2024-09-29 09:36:14 发布
最新推荐文章于 2024-09-29 09:36:14 发布
阅读量449 收藏 6
点赞数 4
分类专栏： css 文章标签： css 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/mq1314520_zhl/article/details/139339351
版权

1、介绍

        Tailwind CSS 的工作原理是扫描所有 HTML 文件、JavaScript 组件以及任何 模板中的 CSS 类（class）名，然后生成相应的样式代码并写入 到一个静态 CSS 文件中。他快速、灵活、可靠，没有运行时负担。

        官网：Font Family - TailwindCSS中文文档 | TailwindCSS中文网

2、安装并使用

  • 安装 Tailwind CSS

        通过 npm 安装 tailwindcss，然后创建你自己的 create your tailwind.config.js 配置文件。

npm install -D tailwindcss
npx tailwindcss init
  • 配置模板文件的路径

        在 tailwind.config.js 配置文件中添加所有模板文件的路径

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{html,js}"],
  theme: {
    extend: {},
  },
  plugins: [],
}
  • 将加载 Tailwind 的指令添加到你的 CSS 文件中

        在你的主 CSS 文件中通过 @tailwind 指令添加每一个 Tailwind 功能模块。

@tailwind base;
@tailwind components;
@tailwind utilities;
  • 开启 Tailwind CLI 构建流程

        运行命令行（CLI）工具扫描模板文件中的所有出现的 CSS 类（class）并编译 CSS 代码。

npx tailwindcss -i ./src/input.css -o ./src/output.css --watch
  • 在你的 HTML 代码中使用 Tailwind 吧

        在 <head> 标签内引入编译好的 CSS 文件，然后就可以开始使用 Tailwind 的工具类 来为你的内容设置样式了。

<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="./output.css" rel="stylesheet">
</head>
<body>
  <h1 class="text-3xl font-bold underline">
    Hello world!
  </h1>
</body>
</html>

3、在vue项目中实际的使用及效果图

  • 在目录styles添加文件taiwind.scss文件并添加代码
@tailwind base;
@tailwind components;
@tailwind utilities;

  • 在main.js中引入
// 引入 tailwind css
import './styles/tailwind.scss'

  • 在代码中使用 

可爱的秋秋啊
关注
专栏目录
webpack-tailwindcss:在 Webpack 中使用 TailwindCSS
07-23
webpack-tailwindcss 此模板旨在帮助您基于 Webpack + TailwindCSS 启动您的项目，同时保持最佳性能实践设置，因此您不必担心基础知识。 它为您设置了一些设置，因此您不必在文档、代码拆分和 ESBuild 构建中查找...
tailwind-mobile:使用Tailwind CSS制作的移动UI组件
05-01
**Tailwind CSS介绍** Tailwind CSS是一个实用优先的CSS框架，专注于提供最小化的、高度可配置的基础样式，而不是预定义的组件。开发者可以自定义样式，快速构建定制化的UI，而无需编写大量重复的CSS代码。在...
在HTML中如何安装使用Tailwind CSS
qq_55961367的博客
07-03 384
在该文件下添加运行命令，使用npm i cross-env --save-dev进行安装。路径错误，解决：改文件夹的层级，或者改这行命令的路径。监听是否修改css文件，添加一行命令，这时候只要运行。8.优化tailwind.config.js文件配置，减少不必要代码。创建.js配置文件，将配置文件修改为如图所示。在package.json中添加一行代码。在文件中配置相关信息。就可以自动监听你的页面改动。
tailwindcss保姆级教程(纯代码)
yingbbai的博客
05-18 752
无需配置webpack，简单快速上手tailwindcss
Tailwind CSS 入门——浅谈CSS原子化、语义化
immocha的博客
04-25 840
Tailwind CSS，是一个功能类优先的CSS框架，它集成了诸如flexpt-4和rotate-90这样的的类，它们能直接在脚本标记语言中组合起来，构建出任何设计。官网地址：https://tailwindcss.com/ V3版本目前还没有中文文档，需要看中文文档的可以看V2版本。来自。
Tailwind CSS 浅析
织网的博客
01-08 6733
就是一个CSS框架，和你知道的bootstrap，element ui，Antd，bulma。一样。将一些css样式封装好，用来加速我们开发的一个工具。 和其他的CSS框架有什么区别？ CSS发展到现在，基本经历了三个阶段。 第一个阶段，原生写法 是类似于编程中面向过程的写法，需要什么样式，自己在css中写什么样式。对代码有洁癖的程序员会进行简单的css复用。但是也只是简单的复用，大多数时候还是需要什么写什么，想怎么写怎么写。 第二个阶段，CSS组件化。 类似于编程中面向对象的写法，将相同视觉的UI封装.
Tailwind CSS学习——编写第一个tailwindcss的HTML页面
whitelonely的博客
04-12 2995
引言： 今天突然在网上看到了Tailwind CSS，发现挺不错的，可以直接使用已经封装好的CSS，省去了很多编写CSS样式单的麻烦。所以写一篇博文来记录一下学习过程！ （PS：本文使用VSCode进行过程演示） 安装Tailwind CSS并编写第一个利用它的HTML页面 相关过程 1. 首先建立一个文件夹，如“TailwindTest” 2. 使用VSCode打开该文件夹，并在终端输入以下命令 npm init -y 如下图： 3. 安装Tailwind CSS的一些库，在终端输入以下命令（联网
TailwindCss基本介绍和使用
qq_40147756的博客
07-23 6260
TailwindCss基本介绍和使用
tailwindcss 基本介绍使用
2301_76813316的博客
10-10 284
tailwindcss是一种原子化css框架 他集成了写好的一些css样式 对于我们繁琐的创建类名和写样式 消耗了大量的时间 这时候tailwindcss提供给我们写好的一些样式直接在标签中写class 在class中写样式这样省去了我们创建类名和时间成本 下面开始操作。
tailwindcss 使用
HYeeee的博客
05-22 701
3.0可不用配置，默认就是该模式，无法关闭。按需加载样式，定义在extend中的样式也一样，没被用到，不会加载。另外，如果在一个页面中，有动态计算的样式，会因为在编译阶段没有该样式导致不生效;这里的需求是：显示卡片个数根据页面宽度自适应，1600及以上显示4个，以下显示3个。模式下，如果样式可预见，可以在某个页面处固定写死那些动态生成的。模式下动态定义的样式不会解析出来。函数 —— （推荐方式）批量生成配置，从而获得对应。这个最大问题在于只能是。
TailwindCSS的使用
weixin_60053942的博客
12-11 669
使用@apply.menu {虽然@apply指令可以模块化样式，但避免早期抽象是好的。过度使用可能会增加最终CSS文件的大小。推荐优先使用内置的Tailwind工具和迭代流程，而不是自定义类。
vue3使用tailwindcss
weixin_43737733的博客
09-20 513
purge: [], //purge: ['./index.js', './src/**/*.{js,jsx,ts,tsx}'], // 根据实际情况配置路径。2.生成Tailwind CSS创建配置文件（生成postcss和tailwind文件）5.在main.js入口文件引入main.css。中，你可以根据需要配置Tailwind CSS。4.在asstes文件夹创建main.css。
tailwindcss-typography:Tailwind CSS插件生成排版工具和文本样式组件
05-02
如果您的项目使用的是较早版本的Tailwind，则应安装此插件的最新2.x版本（ npm install tailwindcss-typography@2.x ）。 安装 npm install tailwindcss-typography 用法 // tailwind.config.js module . exports =...
tailwindcss-aspect-ratio:用于tailwindcss框架的宽高比插件
05-02
如果您的项目使用的是较早版本的Tailwind，则应安装此插件的最新2.x版本（ npm install tailwindcss-aspect-ratio@2.x ）。 安装 npm install tailwindcss-aspect-ratio 用法 该插件在Tailwind配置的theme和...
tailwindcss-border-gradient-radius:用于生成边框渐变的 Tailwind CSS 插件可以与圆形实用程序一起使用
05-29
npm install tailwindcss-border-gradient-radius yarn add tailwindcss-border-gradient-radius 用法 简单的 { theme : { linearBorderGradients : theme => ( { colors : theme ( 'colors' ) , background :...
CSS-Day3
最新发布
m0_74039531的博客
09-29 163
伪类的语法：selector:pseudo-class {property:value;}CSS类也可以使用伪类：selector.class:pseudo-class {property:value;}您可以使用 :first-child 伪类来选择父元素的第一个子元素。p:first-child { color:blue; }在下面的例子中，选择相匹配的所有<p>元素的第一个 <i> 元素：p > i:first-child { color:blue; }在下面的例子中，选择器匹配所有作
前端工程规范-3：CSS规范（Stylelint）
Vinca@的博客
09-26 1002
Stylelint 是一个灵活且强大的工具，适用于保持 CSS 代码的质量和一致性。结合其他工具（如 Prettier 和 ESLint），可以更全面地保障前端代码的整洁性和可维护性。
CSS开发全攻略
邓邓子的博客
09-25 1343
在网页设计与开发的世界中，CSS（Cascading Style Sheets，层叠样式表）是一种不可或缺的技术，它允许开发者对网页的布局和样式进行精细的控制。本文将从CSS的基本概念、作用以及它在现代网页设计中的重要性等方面进行详细概述。CSS是一种用于描述HTML或XML文档样式的样式表语言。它定义了如何将结构化文档（例如HTML文档或XML应用程序）呈现为网页。CSS的主要作用是分离文档的内容（HTML或XML结构）与文档的表现形式（布局、颜色、字体等），从而实现更高效的页面设计与维护。
tailwindCSS使用方法
07-11
Tailwind CSS 是一个高度可定制的 CSS 框架，它提供了大量的实用类，让开发者可以快速构建现代化的用户界面。下面是使用 Tailwind CSS 的一般步骤： 1. 安装 Tailwind CSS：可以通过 npm 或 yarn 来安装 Tailwind CSS。在命令行中运行以下命令来进行安装： ``` npm install tailwindcss ``` 或 ``` yarn add tailwindcss ``` 2. 创建配置文件：在项目的根目录中创建一个名为 `tailwind.config.js` 的文件。在该文件中，你可以自定义 Tailwind CSS 的配置选项，并添加你自己的样式。 3. 引入 Tailwind CSS：在你的 CSS 文件中引入 Tailwind CSS。你可以选择使用 `@import` 或 `@use` 来引入 Tailwind CSS。如果使用 Sass，可以在你的 `.scss` 文件中添加以下代码： ```scss @import 'tailwindcss/base'; @import 'tailwindcss/components'; @import 'tailwindcss/utilities'; ``` 4. 使用实用类：Tailwind CSS 的核心概念是使用实用类（Utility Classes）。你可以在 HTML 元素上直接添加这些类，以应用相应的样式。例如，要将一个按钮样式为蓝色和大号，可以添加以下类： ```html <button class="bg-blue-500 text-white text-lg">按钮</button> ``` 5. 自定义样式：如果你需要自定义样式，可以在配置文件中进行全局配置，或者在需要的地方使用行内样式。你可以根据自己的需求，修改颜色、字体、边距等样式。 这只是一个简单的使用方法，Tailwind CSS 还有更多功能和选项可以探索。你可以查阅官方文档来获取更详细的信息：https://tailwindcss.com/
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值