tailwindcss 写原生html

需要注意:

  1. html文件中引入的是output.css input.css写那三行预留的就可以了

  1. 打包的时候只要打包html output.css img文件夹句ok,其他都不用

  1. 原理是运行时生产output.css文件,直接

【注意!注意!注意!class="xxxx" 不要用className=“Xxxxx‘ 那是react的写法不行的】

要用

使用 npm 或者 pnpm 安装

# 使用 npm 安装
npm init 
npm i -D tailwindcss postcss autoprefixer
# 使用 pnpm,节省硬盘空间
npm i -g pnpm
pnpm init 
pnpm i -D tailwindcss postcss autoprefixer

生成配置文件

# 初始化配置文件
npx tailwindcss init -p

编辑 tailwind.config.js

// tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./**/*.html"], // 根据实际情况设置路径
  theme: {
    extend: {},
  },
  plugins: [],
};

新建样式文件(例如input.css)并写入:

// input.css

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

在页面中引用最终样式,例如output.css

// index.html

<link rel="stylesheet" href="./output.css" />

在终端运行命令,可选参数 –minify 进行压缩:

npx tailwindcss build -i input.css -o output.css --watch --minify

然后编辑页面标签里写入预置的样式名,

// index.html

...
<div class="container mx-auto"></div>
...

或者编辑input.css再保存文件即可。

// input.css

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

body {
  @apply bg-slate-200;
}

也可以改成编辑package.json

// package.json

...
"script": {
"dev": "npx tailwindcss -i input.css -o output.css --watch",
"build": "npx tailwindcss -i input.css -o output.css --minify"
}
...

编辑时运行(必须保持运行,如果出错导致自动退出则需重新运行):

npm run dev

编辑完,进行压缩

npm run build
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值