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

  
  
  
  


  

    Hello world!
  

CDN demo

refs

?xgqfrms 2012-2020

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

原创文章，版权所有??xgqfrms, 禁止转载 ???，侵权必究??！