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

(🐞 反爬虫测试！打击盗版⚠️）如果你看到这个信息, 说明这是一篇剽窃的文章，请访问 https://www.cnblogs.com/xgqfrms/ 查看原创文章！

refs

©xgqfrms 2012-2021

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

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

posted @ 2022-04-27 16:08  xgqfrms  阅读(61)  评论(1)    收藏  举报