xgqfrms™, xgqfrms® : xgqfrms's offical website of cnblogs! xgqfrms™, xgqfrms® : xgqfrms's offical website of GitHub!

Tailwind CSS All In One

Tailwind CSS All In One

image

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

refs



©xgqfrms 2012-2025

www.cnblogs.com/xgqfrms 发布文章使用:只允许注册用户才可以访问!

原创文章,版权所有©️xgqfrms, 禁止转载 🈲️,侵权必究⚠️!


posted @   xgqfrms  阅读(55)  评论(1编辑  收藏  举报
相关博文:
阅读排行:
· 在鹅厂做java开发是什么体验
· 百万级群聊的设计实践
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战
· 永远不要相信用户的输入:从 SQL 注入攻防看输入验证的重要性
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析
历史上的今天:
2021-04-27 js get mouse scroll event All In One
2021-04-27 rename object key & duplicate object key All In One
2021-04-27 Beacon API & Page Visibility API & pagehide & Front-End Monitor In Action
2021-04-27 git merge other feature branch into current feature branch
2021-04-27 新冠灭活疫苗 All In One
2020-04-27 Vue SSR in Action
2020-04-27 Node.js 如何处理一个很大的文件 All In One
点击右上角即可分享
微信分享提示