Tailwindcss学习1:安装配置
an7
0x89D7
April 7th, 2022

创建目录并安装tailwind

mkdir tailwind-test
cd tailwind-test
npm -y init
npm install tailwindcss

创建tailwind配置文件和PostCSS配置文件

npx tailwindcss init -p

多出文件tailwind.config.js和postcss.config.js

修改tailwind.confg.js如下，意味着放在src和public文件夹下的html js文件适用框架

module.exports = {
  content: [
    "./src/**/*.{html,js}",
    "./public**/*.{html,js}"
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

修改postcss.config.js如下

module.exports = {
  plugins: [
    require('tailwindcss'),
    require('autoprefixer'),
  ]
}

使用tailwind CLI生成完全编译的Tailwind CSS文件，这将创建一个基于 Tailwind 的默认配置生成的名为 tailwind.css 的文件，并使用 autoprefixer 自动添加任何必需的浏览器前缀。

npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch

现在，src和public文件夹下的html文件即可引用tailwind.css样式文件

<!-- ./src/index.html -->
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Learn tailwind</title>
        <link rel="stylesheet" href="../tailwind.css">
    </head>

    <body>
        <h1 class="flex text-3xl font-bold underline text-blue-600">
            Hello world!
        </h1>
    </body>
</html>
tailwind css hello world!
tailwind css hello world!
Subscribe to an7
Receive the latest updates directly to your inbox.
Verification
This entry has been permanently stored onchain and signed by its creator.
Arweave Transaction
Dm9vUHNftIOspU2…UKThjMLaCMax4dE
Author Address
0x89D73DE516eFa8b…e593aB668779E15
Content Digest
QSftrWnLpt6FITf…3hfb8A1gThFC43k