Skip to main content

简介

tailwindcss 是一款原子性、需要预编译的、可用于快速构建用户自定义ui的css框架

环境搭建​

# Install Tailwind CSS
npm install -D tailwindcss
# create config file - tailwind.config.js
npx tailwindcss init

tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/*.js","./src/**/*.js","./src/**/**/*.js"], //add js path
  theme: {
    extend: {},
  },
  plugins: [],
}

build css

# Run the CLI tool to scan your template files for classes and build your CSS.
npx tailwindcss -i ./src/index.css -o ./public/style.css --watch 
@tailwind base;
@tailwind components;
@tailwind utilities;

@base {
  *{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
}

Start using Tailwind in your HTML

public/index.html 引入编译后的css：

 <link rel="stylesheet" href="%PUBLIC_URL%/style.css" />

更多请参考： https://tailwindcss.com/docs/installation