CLI

命令行独立使用不依赖构建
https://tailwindcss.com/blog/standalone-cli

Standalone CLI

版本
https://github.com/tailwindlabs/tailwindcss/releases/tag/v3.4.16

Linux-x64
https://github.com/tailwindlabs/tailwindcss/releases/download/v3.4.16/tailwindcss-linux-x64

下载地址

curl -sLO https://github.com/tailwindlabs/tailwindcss/releases/download/v3.4.16/tailwindcss-linux-x64
chmod +x tailwindcss-linux-x64
mv tailwindcss-linux-x64 tailwindcss-cli

cli shell

./tailwindcss-cli --help

tailwindcss v3.4.16

Usage:
   tailwindcss [--input input.css] [--output output.css] [--watch] [options...]
   tailwindcss init [--full] [--postcss] [options...]

Commands:
   init [options]

Options:
   -i, --input              Input file
   -o, --output             Output file
   -w, --watch              Watch for changes and rebuild as needed
   -p, --poll               Use polling instead of filesystem events when watching
       --content            Content paths to use for removing unused classes
       --postcss            Load custom PostCSS configuration
   -m, --minify             Minify the output
   -c, --config             Path to a custom config file
       --no-autoprefixer    Disable autoprefixer
   -h, --help               Display usage information

Vscode 集成

安装 Tailwind CSS IntelliSense 插件
https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss
VScode 插件，官方维护，提供代码自动补全，语法高亮，代码样式显示等。

基本命令

# Create a tailwind.config.js file
./tailwindcss init

# Start a watcher 监控变化实时打包
./tailwindcss -i input.css -o output.css --watch

# Compile and minify your CSS for production 最小生成打包
./tailwindcss -i input.css -o output.css --minify

Hello Word

src/input.css

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

将所有模板文件的路径添加到

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

然后就可以构建了

./tailwindcss-cli -i ./src/input.css -o ./src/output.css --watch

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>

标签: CSS, TailwindCSS

评论已关闭