当前位置: 首页 > article >正文

tailwindcss快速入门(上篇)

tailwindcss

相关链接

  1. 演示地址 演示地址
  2. 源码地址 源码地址

什么是 Tailwind

  • Tailwind CSS 是一种 实用优先的 CSS 框架,它通过一组预定义的、基于类名的样式帮助开发者快速构建现代化、响应式的用户界面。与传统的 CSS 框架(如 Bootstrap)不同,Tailwind 并不提供现成的 UI 组件,而是通过大量的小而精确的 CSS 类,让开发者能够灵活地自定义页面的设计,而无需编写大量自定义的 CSS 代码。

安装与配置

  1. 安装 Tailwind CSS
  • 通过 npm 安装 tailwindcss,然后创建你自己的 create your tailwind.config.js 配置文件。
npm install -D tailwindcss
npx tailwindcss init
  1. 配置模板文件的路径
  • 在 tailwind.config.js 配置文件中添加所有模板文件的路径。
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ['./src/**/*.{html,js}'],
  theme: {
    extend: {},
  },
  plugins: [],
};
  1. 将加载 Tailwind 的指令添加到你的 CSS 文件中
  • 将加载 Tailwind 的指令添加到你的 CSS 文件中
/*src/input.css*/
@tailwind base;
@tailwind components;
@tailwind utilities;
  1. 启 Tailwind CLI 构建流程
  • 运行命令行(CLI)工具扫描模板文件中的所有出现的 CSS 类(class)并编译 CSS 代码。
npx tailwindcss -i ./src/input.css -o ./src/output.css --watch
  1. 在你的 HTML 代码中使用 Tailwind 吧
  • 在 标签内引入编译好的 CSS 文件,然后就可以开始使用 Tailwind 的工具类 来为你的内容设置样式了。
<!--src/index.html-->
<!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>

如何配置主题,字体样式等

  • 主题部分是您定义调色板、字体、字体比例、边框大小、断点 - 与站点视觉设计相关的任何内容的地方
//tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
  // ...
  theme: {
    colors: {
      blue: '#1fb6ff',
      purple: '#7e5bef',
      pink: '#ff49db',
      orange: '#ff7849',
      green: '#13ce66',
      yellow: '#ffc82c',
      'gray-dark': '#273444',
      gray: '#8492a6',
      'gray-light': '#d3dce6',
    },
    fontFamily: {
      sans: ['Graphik', 'sans-serif'],
      serif: ['Merriweather', 'serif'],
    },
    extend: {
      spacing: {
        '8xl': '96rem',
        '9xl': '128rem',
      },
      borderRadius: {
        '4xl': '2rem',
      },
    },
  },
};

如何使用插件

  • 插件部分允许您向 Tailwind 注册插件,这些插件可用于生成额外的实用程序、组件、基本样式或自定义变体。
//tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
  // ...
  plugins: [
    require('@tailwindcss/forms'),
    require('@tailwindcss/aspect-ratio'),
    require('@tailwindcss/typography'),
    require('tailwindcss-children'),
  ],
};

如何设置预设

  • 预设部分允许您指定自己的自定义基本配置,而不是使用 Tailwind 的默认基本配置。
//tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
  // ...
  presets: [require('@acmecorp/base-tailwind-config')],

  // Project-specific customizations
  theme: {
    //...
  },
};

如何设置前缀

  • 前缀选项允许您向所有 Tailwind 生成的实用程序类添加自定义前缀。当将 Tailwind 分层在可能存在命名冲突的现有 CSS 之上时,这非常有用。
//tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
  prefix: 'tw-',
};
  • 现在每个类都将使用配置的前缀生成:
.tw-text-left {
  text-align: left;
}
.tw-text-center {
  text-align: center;
}
.tw-text-right {
  text-align: right;
}
  • 重要的是要了解此前缀添加在任何变体修饰符之后。这意味着具有响应式或状态修饰符(例如 sm: 或悬停:)的类仍将首先具有响应式或状态修饰符,并且您的自定义前缀出现在冒号之后:
<div class="tw-text-lg md:tw-text-xl tw-bg-red-500 hover:tw-bg-blue-500">
  <!-- -->
</div>

配置是否应标记为 !important

  • important 选项可让您控制 Tailwind 的实用程序是否应标记为 !important。当将 Tailwind 与具有高特异性选择器的现有 CSS 一起使用时,这非常有用。
//tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
  important: true,
};
  • 现在所有 Tailwind 的实用程序类都将生成为 !important:
.leading-none {
  line-height: 1 !important;
}
.leading-tight {
  line-height: 1.25 !important;
}
.leading-snug {
  line-height: 1.375 !important;
}
  • 这也适用于您使用 @layer utility 指令在 CSS 中定义的任何自定义实用程序
@layer utilities {
  .bg-brand-gradient {
    background-image: linear-gradient(#3490dc, #6574cd);
  }
}

/* Output */
.bg-brand-gradient {
  background-image: linear-gradient(#3490dc, #6574cd) !important;
}

未完待续…

联系我们

  1. 关注我们
  1. 联系作者

http://www.kler.cn/news/331343.html

相关文章:

  • Web安全 - 构建全面的业务安全保护防御体系
  • 深度学习数据增强的常用方法
  • 滚雪球学Oracle[4.6讲]:存储过程与函数
  • 短视频矩阵系统源码开发/矩阵系统OEM搭建--源代码开发经验分享
  • NVIDIA G-Assist 项目:您的游戏和应用程序AI助手
  • 树莓派 AI 摄像头(Raspberry Pi AI Camera)教程
  • 计网问答大题(期末复习)
  • [C++][第三方库][etcd]详细讲解
  • vue3项目el-table表格行内编辑加输入框校验
  • RabbitMQ 消息队列:生产者与消费者实现详解
  • Linux文件重定向文件缓冲区
  • 【漏洞复现】大华智慧园区综合管理平台 video 任意文件上传漏洞
  • 【rCore OS 开源操作系统】Rust mod模块和static生命周期 知识点及练习题
  • LeetCode hot100---哈希表专题(C++语言)
  • 【ecology】独立选择框\公共选择框表
  • C#的面向对象
  • C#类的概念
  • HarmonyOS Next应用开发——响应式布局之媒体查询
  • 【2024.10.2练习】奶牛晒衣服
  • Vue diff 算法介绍