如何安装和使用Tailwind CSS

sg_knight

于 2024-07-30 16:39:32 发布

阅读量251

点赞数 7

分类专栏：前端文章标签： css 前端 tailwind vue vite

本文链接：https://blog.csdn.net/sg_knight/article/details/140800293

版权

前端专栏收录该内容

81 篇文章 6 订阅

订阅专栏

Tailwind CSS 是一个实用的 CSS 框架，提供了大量预定义的类，帮助开发者快速构建美观的网页界面。以下将详细介绍如何在项目中安装和使用 Tailwind CSS。

一、安装 Tailwind CSS

1、使用 npm 安装 Tailwind CSS 及其依赖

在项目根目录下，运行以下命令来安装 Tailwind CSS、PostCSS 和 Autoprefixer（一个用于添加浏览器前缀的 PostCSS 插件）。

npm install -D tailwindcss postcss autoprefixer

2、初始化 Tailwind CSS 配置文件

使用 npx 运行 Tailwind CSS 的 init 命令来创建配置文件 tailwind.config.js。

npx tailwindcss init

配置文件示例（根据需要调整）：

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './src/**/*.{js,jsx,ts,tsx,vue,html}',
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

请注意，content 数组中的路径应指向项目中包含类名的所有文件，这样 Tailwind CSS 才能只包含实际使用的类，以减小最终 CSS 文件的大小。

二、构建和使用 Tailwind CSS

1、创建样式文件

在项目根目录下或特定目录（如 src）中创建一个 CSS 文件（如 input.css），并添加 Tailwind CSS 的指令。

@tailwind base;  
@tailwind components;  
@tailwind utilities;

2、构建样式文件

在项目根目录下通过命令行工具构建样式文件。

npx tailwindcss -i ./src/input.css -o ./src/tailwind.css --watch

3、在HTML文件中引入样式

<!DOCTYPE html>  
<html lang="en">  
<head>  
  <meta charset="UTF-8">  
  <meta name="viewport" content="width=device-width, initial-scale=1.0">  
  <link href="./tailwind.css" rel="stylesheet">  
</head>  
<body>  
  <h1 class="text-3xl font-bold underline">Hello world!</h1>  
</body>  
</html>

4、在vue项目中全局引入

在 main.js 或相应的入口文件中引入构建后的 CSS 文件。

import Vue from 'vue'  
import App from './App.vue'  
import './tailwind.css' // 全局引入样式文件  

Vue.config.productionTip = false  

new Vue({  
  render: h => h(App),  
}).$mount('#app')

三、使用 Tailwind CSS

现在，您可以在 HTML 或 Vue 组件的模板中直接使用 Tailwind CSS 提供的类来设置样式了。例如，在 Vue 组件的模板中：

<template>  
  <div class="bg-blue-500 text-white p-4 rounded">  
    <h1 class="text-2xl font-bold">Welcome to Tailwind CSS</h1>  
  </div>  
</template>

四、注意事项

确保在开发过程中保持 Tailwind CSS 构建命令的持续运行，以便实时更新样式。
根据项目需求调整 tailwind.config.js 中的配置，如自定义主题、插件等。
考虑使用 Tailwind CSS 的 JIT 模式（Just-in-Time），它可以在开发过程中仅包含实际使用的类，进一步减小最终 CSS 文件的大小。启用 JIT 模式通常需要在 tailwind.config.js 中设置 mode: 'jit'。

新时代农民工（QQ：277718357）点击关注下方 ↓ 微信公众号：程序进阶之路，了解更多技术知识。