如何使用 Tailwind CSS 更改悬停时的宽度？

在本文中，我们将使用 Tailwind 更改悬停时的宽度。 Tailwind 中没有内置方法，因此您必须自定义tailwind.config.js文件。让我们在本文中进一步讨论整个过程。

默认情况下，tailwind CSS 只为宽度实用程序生成响应式变体。要修改悬停宽度，您需要修改tailwind.config.js文件。以下步骤是在您的项目文件夹中添加 tailwind.config.js 文件，以便在悬停时更改宽度。

首先，您必须安装 Tailwind CSS。下面给出了安装tailwind CSS的步骤。

先决条件：按照以下步骤将您自己的实用程序类添加到顺风。

第 1 步：将以下代码运行到文件夹的终端。这将创建 package.json 文件。

npm init 

第 2 步：将以下代码复制并粘贴到文件夹的终端。这将为顺风创建所需的节点模块。

npm install tailwindcss@latest postcss@latest autoprefixer@latest

第三步：创建一个公用文件夹并添加index.html, style.css , 和公共文件夹中的tailwind.css 。

第四步：添加以下代码 tailwind.css文件。使用此文件，您可以自定义您的顺风 CSS 以及默认样式。 Tailwind 将在构建时将这些指令与所有样式交换出来。它根据您配置的设计系统生成。

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

第 5 步：打开package.json文件并在 script 标签下添加以下代码

"scripts": {
   "build:css": "tailwind build public/tailwind.css -o public/style.css"
 },

第 6 步：在终端中运行以下代码。这将使用预定义的 Tailwind CSS 代码填充您的 style.css 文件。

npm run build:css

第 7 步：最后，运行以下代码。这将使用安装tailwindcss npm 包时包含的 Tailwind CLI 实用程序为您的项目生成Tailwind 配置文件：

npx tailwindcss init

句法：

variants: {
    width: ["responsive", "hover", "focus"]
}

tailwind.config.js：以下代码是tailwind 配置文件的内容。我们只是想扩展配置以添加新值。

Javascript

module.exports = {
    purge: [],
    darkMode: false, // or 'media' or 'class'
    theme: {
        extend: {},
    },
      
    variants: {
        width: ["responsive", "hover", "focus"]
    },
      
    plugins: [],
}

示例 1：

HTML

  

    

  

    

        
HOVER HERE
    

  

输出：

示例 2：再次在悬停时，要同时更改高度和宽度，您必须在tailwind.config.js上添加或修改以下代码

variants: {
     width: ["responsive", "hover", "focus"],
     height: ["responsive", "hover", "focus"]
},

HTML

  

    

  

    

        
HOVER HERE
    

  

输出：