Tailwind CSS指南

突然好热

已于 2024-07-13 16:55:38 修改

阅读量1.3k

点赞数 5

分类专栏： CSS 文章标签： css 前端

于 2024-07-13 16:53:14 首次发布

本文链接：https://blog.csdn.net/m0_46543935/article/details/140401859

版权

CSS 专栏收录该内容

2 篇文章

订阅专栏

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

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

这里写目录标题

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

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初始化：

你在项目中安装并配置 Tailwind CSS、PostCSS 和 Autoprefixer
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',
       },
     })
}

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 的行为和样式。例如，你可以添加自定义颜色、调整间距和扩展默认的主题。