Tailwind CSS All In One
Tailwind CSS All In One
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 文件。
它快速、灵活且可靠——运行时间为零。
https://tailwindcss.com/docs/installation
https://tailwindcss.com/docs/guides/vite
https://tailwindcss.com/docs/guides/nuxtjs
https://tailwindcss.com/docs/guides/create-react-app
Tailwind CLI
$ npm install -D tailwindcss
$ npx tailwindcss init
tailwind.config.js
module.exports = {
// 1. Configure your template paths
content: ["./src/**/*.{html,js}"],
theme: {
extend: {},
},
plugins: [],
}
main.css
// 2. add the Tailwind directives
@tailwind base;
@tailwind components;
@tailwind utilities;
/* css styles */
# 3. CLI build
$ npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 4. using Tailwind in your HTML -->
<link href="/dist/output.css" rel="stylesheet">
</head>
<body>
<h1 class="text-3xl font-bold underline">
Hello world!
</h1>
</body>
</html>
CDN demo
(🐞 反爬虫测试!打击盗版⚠️)如果你看到这个信息, 说明这是一篇剽窃的文章,请访问 https://www.cnblogs.com/xgqfrms/ 查看原创文章!
refs
©xgqfrms 2012-2021
www.cnblogs.com/xgqfrms 发布文章使用:只允许注册用户才可以访问!
原创文章,版权所有©️xgqfrms, 禁止转载 🈲️,侵权必究⚠️!
本文首发于博客园,作者:xgqfrms,原文链接:https://www.cnblogs.com/xgqfrms/p/16199384.html
未经授权禁止转载,违者必究!