胖蔡说技术
随便扯扯

Tailwindcss 配置使用指南

介绍

Tailwind CSS 是一个利用公用程序类(Utilize Class,下文皆称Utilize Class)的 CSS 框架 。 但被我们称之为”原子类”, 其工作原理是扫描所有 HTML 文件、JavaScript 组件以及任何 模板中的 CSS 类(class)名,然后生成相应的样式代码并写入 到一个静态 CSS 文件中。

使用 Tailwind CSS,你可以使用Utilize Class轻松设置响应式设计,因此您无需设置媒体查询。它快速、灵活、可靠,没有运行时负担。

快速上手

依赖环境

Tialwindcss 支持多种环境安装实现 。

安装

使用tailwind cli

从零开始使用Tailwind CSS最简单、最快的方法是使用Tailwind CLI工具。如果您想在不安装Node.js的情况下使用CLICLI也可以作为独立的可执行文件使用(使用cli可执行文件不支持windows系统安装,这里不做介绍,默认需要安装nodejs环境, 配置使用参考在没有nodejs情况下如何使用Tailwind CSS)。

1. 安装 Tailwind  CSS

$ npm install -D tailwindcss
$ npx tailwindcss init

2. 配置适用文件地址

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

/** @type {import('tailwindcss').Config} */

module.exports = {
  content: ["./src/**/*.{html,js}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

3. 全局加载 Tailwind指令

在我们的入口文件中导入一个全局css文件global.css , 如下:

// global.css
@tailwind base;
@tailwind components;
@tailwind utilities;

4. 开启Tailwind cli构建

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

$ npx tailwindcss -i ./src/global.css -o ./dist/output.css --watch

5. 在html中使用tailwind

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

// index.html
<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="/dist/output.css" rel="stylesheet">
</head>

<body>
  <h1 class="text-3xl font-bold underline">
    Hello world!
  </h1>
</body>
</html>

使用PostCss

Tailwind CSS安装为PostCSS插件是将其与webpack、Rollup、ViteParcel等构建工具集成的最无缝的方式。

1. 安装 tailwindcss 并创建 tailwind.config.js

$npm install -D tailwindcss postcss autoprefixer # 安装tailwindcss、postcss
$ npx tailwindcss init # 创建tailwind.config.js文件

2. 将tailwindcss添加到postcss配置中

//  postcss.config.js
module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  }
}

3. 配置适用文件

// tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{html,js}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

4. 添加tailwind指令到入口的css文件中

// global.css
@tailwind base;
@tailwind components;
@tailwind utilities;

使用CDN

使用CDN在浏览器中直接尝试Tailwind,无需任何构建步骤。CDN仅用于开发目的,不是生产的最佳选择。

1. 添加CDN脚本到目标html文件中

// index.html
<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://cdn.tailwindcss.com"></script>   <!--tailwindcss 脚本地址-->
</head>

<body>
  <h1 class="text-3xl font-bold underline">
    Hello world!
  </h1>
</body>
</html>

2. 定制客制化配置

编辑tailwind.config对象以使用自己的自定义配置。

// index.html
<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://cdn.tailwindcss.com"></script>
  <script>
  // 自定义配置
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            clifford: '#da373d',
          }
        }
      }
    }
  </script>
</head>
<body>
  <h1 class="text-3xl font-bold underline **text-clifford**">
    Hello world!
  </h1>
</body>
</html>

3. 添加自定义tailwindcss样式

在html中通过适用 type="text/tailwindcss" 添加自定义的tailwind  css样式

// index.html
<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://cdn.tailwindcss.com"></script>
  <style type="text/tailwindcss">
    @layer utilities {
      .content-auto {
        content-visibility: auto;
      }
    }
  </style>
</head>
<body>
  <div class="lg:content-auto">
    <!-- ... -->
  </div>
</body>
</html>

4. 使用插件

通过在cdn地址中添加plugins参数开启插件使用,如 formstypography

// index.html
<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://cdn.tailwindcss.com?plugins=forms,typography,aspect-ratio,line-clamp"></script>
</head>
<body>
  <div class="prose">
    <!-- ... -->
  </div>
</body>
</html>
赞(0) 打赏
转载请附上原文出处链接:胖蔡叨叨叨 » Tailwindcss 配置使用指南
分享到: 更多 (0)

请小编喝杯咖啡~

支付宝扫一扫打赏

微信扫一扫打赏