tailwindcss 的使用

最新推荐文章于 2025-03-31 09:44:05 发布

前端--yxh

最新推荐文章于 2025-03-31 09:44:05 发布

阅读量623

点赞数 6

分类专栏：前端技术库使用文章标签： javascript

本文链接：https://blog.csdn.net/weixin_63182386/article/details/136398448

版权

前端技术库使用专栏收录该内容

1 篇文章

订阅专栏

本文介绍了如何在项目中使用TailwindCSS，包括安装、初始化配置文件、自定义主题以及利用其内置的@apply、@responsive、@screen和@variants等指令。教程详细展示了如何在Vue3项目中集成并配置TailwindCSS以实现快速、灵活的CSS样式编写。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

安装

npm install -D tailwindcss postcss autoprefixer

可能会出现以下问题(没有最好):
在这里插入图片描述

初始化配置文件

npx tailwindcss init -p

编辑 tailwind.config.js 文件

通过配置文件可以定制自己的CSS样式

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

创建 src/theme/tailwind.css

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

在 main.js 中导入

import '@/theme/tailwind.css'

使用

第一种方式

<template>
  <div class="text-[#008c8c] text-[20px] font-bold">
    Vue3-App
  </div>
</template>

第二种方式

<template>
  <div class="title">
    Vue3-App
  </div>
</template>

<style>
.title {
  @apply text-[#008c8c] text-[20px] font-bold;
}
</style>

去除提示 Unknown at rule @apply css(unknownAtRules)

在这里插入图片描述

创建.vscode

创建 settings.json
创建 tailwind.json

编写 settings.json

{
  "css.customData": [".vscode/tailwind.json"]
}

编写 tailwind.json

{
  "version": 1.1,
  "atDirectives": [
    {
      "name": "@tailwind",
      "description": "Use the `@tailwind` directive to insert Tailwind's `base`, `components`, `utilities` and `screens` styles into your CSS.",
      "references": [
        {
          "name": "Tailwind Documentation",
          "url": "https://tailwindcss.com/docs/functions-and-directives#tailwind"
        }
      ]
    },
    {
      "name": "@apply",
      "description": "Use the `@apply` directive to inline any existing utility classes into your own custom CSS. This is useful when you find a common utility pattern in your HTML that you’d like to extract to a new component.",
      "references": [
        {
          "name": "Tailwind Documentation",
          "url": "https://tailwindcss.com/docs/functions-and-directives#apply"
        }
      ]
    },
    {
      "name": "@responsive",
      "description": "You can generate responsive variants of your own classes by wrapping their definitions in the `@responsive` directive:\n```css\n@responsive {\n  .alert {\n    background-color: #E53E3E;\n  }\n}\n```\n",
      "references": [
        {
          "name": "Tailwind Documentation",
          "url": "https://tailwindcss.com/docs/functions-and-directives#responsive"
        }
      ]
    },
    {
      "name": "@screen",
      "description": "The `@screen` directive allows you to create media queries that reference your breakpoints by **name** instead of duplicating their values in your own CSS:\n```css\n@screen sm {\n  /* ... */\n}\n```\n…gets transformed into this:\n```css\n@media (min-width: 640px) {\n  /* ... */\n}\n```\n",
      "references": [
        {
          "name": "Tailwind Documentation",
          "url": "https://tailwindcss.com/docs/functions-and-directives#screen"
        }
      ]
    },
    {
      "name": "@variants",
      "description": "Generate `hover`, `focus`, `active` and other **variants** of your own utilities by wrapping their definitions in the `@variants` directive:\n```css\n@variants hover, focus {\n   .btn-brand {\n    background-color: #3182CE;\n  }\n}\n```\n",
      "references": [
        {
          "name": "Tailwind Documentation",
          "url": "https://tailwindcss.com/docs/functions-and-directives#variants"
        }
      ]
    }
  ]
}