Skip to main content

安装

工作原理​

Tailwind CSS works by scanning all of your HTML files, JavaScript components, and any other templates for class names, generating the corresponding styles and then writing them to a static CSS file.

It's fast, flexible, and reliable — with zero-runtime.

Tailwind CSS 的工作原理是扫描您的所有 HTML 文件、JavaScript 组件和任何其他模板以查找类名，生成相应的样式，然后将它们写入静态 CSS 文件。

它快速、灵活且可靠——运行时间为零。

tailwind css 安装​

https://tailwindcss.com/docs/installation

使用tailwind cli​

npm install -D tailwindcss
npx tailwindcss init

tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{html,js}"], // 配置识别tailwind class的文件
  theme: {
    extend: {},
  },
  plugins: [],
}

css文件

@tailwind base;
@tailwind components;
@tailwind utilities;

执行 npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch

作为postcss plugin 安装​

postcss文档：https://postcss.org/

npm install -D tailwindcss postcss autoprefixer postcss-cli
npx tailwindcss init

配置postcss.config.js

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {}
  }
}

配置tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{html,js}"], // 配置识别tailwind class的文件
  theme: {
    extend: {},
  },
  plugins: [],
}

src/input.css文件

@tailwind base;
@tailwind components;
@tailwind utilities;
npx postcss ./src/*.css -o ./dist/output.css

cdn 引用​

缺点：编辑器插件不提示

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>

  <!-- 使用cdn引入 -->
  <!-- <script src="https://cdn.tailwindcss.com"></script> -->

  <!-- 使用插件 -->
  <script src="https://cdn.tailwindcss.com?plugins=forms,typography,aspect-ratio,line-clamp"></script>

  <!-- 自定义css type="text/tailwindcss -->
  <style type="text/tailwindcss">
    @layer utilities {
      .content-auto {
        content-visibility: auto;
      }
      .card-shadow {
        box-shadow: 0 0 10px 0 #F5F5F5;
      }
    }
  </style>

</head>
<body>
  <h1 class="text-3xl font-bold underline p-5 text-clifford">hello world</h1>
  <div class="lg:content-auto card-shadow">
    <div>content</div>
    <div class="w-32 line-clamp-1">我计算机卡时间代价按实际do我及哦啊炯炯死哦基调</div>
  </div>

  <!-- 自定义配置 -->
  <script>
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            clifford: '#da373d',
          }
        }
      }
    }
  </script>
</body>
</html>

配合框架​

参考配置指南 或 参考以上方法