”工欲善其事,必先利其器。“—孔子《论语.录灵公》
首页 > 编程 > 如何在新项目和现有项目中使用 Prettier 设置 Tailwind CSS 自动类排序

如何在新项目和现有项目中使用 Prettier 设置 Tailwind CSS 自动类排序

发布于2024-08-07
浏览:984

介绍

Tailwind CSS 是一种流行的实用程序优先 CSS 框架,它提供低级实用程序类来直接在标记中应用样式,从而缩短开发周期。

另一方面,Prettier 是一种广泛使用的代码格式化程序,它通过解析代码并使用自己的规则重新打印来确保代码的格式一致。这有助于在整个项目中保持统一的代码风格,使代码库更干净、更易于阅读。

使用 Tailwind CSS 时的一个常见挑战是管理实用程序类的顺序,尤其是当样式和 HTML 的复杂性不断增加时。手动对这些类进行排序可能很乏味且容易出错。这就是自动类排序的用武之地。通过利用 Prettier 等工具以及 prettier-plugin-tailwindcss 等插件,我们可以自动对 Tailwind CSS 类进行排序,确保顺序一致并提高类的可读性和可维护性。

本文的目的是指导您完成在新项目和现有项目中使用 Prettier 设置 Tailwind CSS 自动类排序的过程。无论您是开始一个新项目还是融入一个正在进行的项目,这份综合指南都将为您提供分步说明。

目录

  • 在新项目中设置 Tailwind CSS 和 Prettier
    • 初始化项目并安装 Tailwind CSS
    • 安装并配置 Prettier
  • 在现有 Tailwind CSS 项目中设置 prettier-plugin-tailwindcss
  • 结论

在新项目中设置 Tailwind CSS 和 Prettier

在开始之前,请确保您已安装以下软件:

  • Node.js
  • 包管理器(我们将在这个项目中使用bun,但如果您愿意,您可以使用npm、yarn或pnpm)
  • 代码编辑器(例如 VS Code)

初始化项目并安装 Tailwind CSS

首先创建一个新项目。具体步骤可能会有所不同,具体取决于您首选的框架或设置。有关详细说明,请参阅 Tailwind CSS 安装框架指南。如果您已完成 Tailwind CSS 安装步骤,则可以继续执行在现有 Tailwind CSS 项目中设置 prettier-plugin-tailwindcss 部分。使用 Vite 的方法如下:

bun create vite my-app --template react-ts
cd my-app
bun install

现在让我们安装和配置 Tailwind CSS

bun install -D tailwindcss postcss autoprefixer
bunx tailwindcss init -p

您应该看到一个 Tailwind CSS 配置文件:tailwind.config.js,将以下内容复制到其中。

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

将以下 Tailwind 指令添加到 CSS 文件的顶部(例如 src/index.css):

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

安装和配置 Prettier

bun install -D prettier prettier-plugin-tailwindcss

在项目的根目录中创建一个 prettier 配置文件,并将 prettier-plugin-tailwindcss 插件添加到配置文件中,我们使用 .prettierrc,您可以在此处查看其他可接受的 prettier 配置文件类型

{
  "plugins": ["prettier-plugin-tailwindcss"]
}

现在让我们测试一下设置,修改 src/App.tsx 文件并保存。

import { useState } from "react";
import "./App.css";

const App = () => {
  const [count, setCount] = useState(0);

  return (
    
      
> ); }; export default App;

结果:

import { useState } from "react";
import "./App.css";

const App = () => {
  const [count, setCount] = useState(0);

  return (
    
      
> ); }; export default App;

在现有 Tailwind CSS 项目中设置 prettier-plugin-tailwindcss

如果您的项目已经设置了 Prettier,则集成 prettier-plugin-tailwindcss 插件非常简单。您只需要安装插件并配置它。如果 Prettier 尚未安装,您需要将其与插件一起设置。

对于具有现有更漂亮设置的项目,运行:

bun add -D prettier-plugin-tailwindcss

对于没有现有 Prettier 设置的项目,运行:

bun add -D prettier prettier-plugin-tailwindcss

将该插件添加到您现有的 Prettier 配置中。如果没有现有的 Prettier 配置,请在项目的根目录中创建一个 .prettierrc 文件。然后添加以下内容:

{
  "plugins": ["prettier-plugin-tailwindcss"]
}

通过使用 Tailwind CSS 类更改文件来确保 Prettier 正常工作。保存文件并检查 Tailwind CSS 类是否自动排序。

How to Setup Tailwind CSS Automatic Class Sorting with Prettier in New and Existing Projects

结论

将 prettier-plugin-tailwindcss 集成到新的和现有的 Tailwind CSS 项目中,通过确保一致且有组织的类排序来改进您的开发工作流程。对于新项目,您可以同时设置 Prettier 和插件以简化初始配置。对于现有项目,只需将插件添加到现有 Prettier 设置中,或者如果尚未配置 Prettier,则安装 Prettier 和插件。

有关其他配置选项,例如对非标准属性中的类进行排序,请访问 prettier-plugin-tailwindcss 文档。

版本声明 本文转载于:https://dev.to/iamsheye/how-to-setup-tailwind-css-automatic-class-sorting-with-prettier-in-new-and-existing-projects-2ob8?1如有侵犯,请联系[email protected]删除
最新教程 更多>
  • 如何将项目添加到Ienumerable中?
    如何将项目添加到Ienumerable中?
    [2收藏。但是,这不能做到,因为Ienumerable 不一定代表可变的收藏。它甚至可能根本不代表集合。 { 字符串s; 做 { S = Console.Readline(); 收益回报s; } while(!strin...
    编程 发布于2025-02-07
  • 对象拟合:IE和Edge中的封面失败,如何修复?
    对象拟合:IE和Edge中的封面失败,如何修复?
    解决此问题,我们采用了一个巧妙的CSS解决方案来解决问题:高度:100%; 高度:auto; 宽度:100%; //对于水平块 ,使用绝对定位将图像定位在中心,以object-fit:object-fit:cover in IE和edge消除了问题。现在,图像将按比例扩展,保持所需的效果而不会失...
    编程 发布于2025-02-07
  • 如何使用char_length()在mySQL中按字符串长度对数据进行排序?
    如何使用char_length()在mySQL中按字符串长度对数据进行排序?
    [2使用内置的char_length()function。 char_length()和length() 此查询将从指定的表中检索所有行,并基于上升顺序对它们进行排序指定列的字符长度。带有更长字符串的行将出现在结果的底部。
    编程 发布于2025-02-07
  • 如何克服PHP的功能重新定义限制?
    如何克服PHP的功能重新定义限制?
    克服PHP的函数重新定义限制在PHP中,多次定义一个相同名称的函数是一个no-no。尝试这样做,如提供的代码段所示,将导致可怕的“不能重新列出”错误。 // error:“ coss redeclare foo()” 但是,php工具腰带中有一个隐藏的宝石:runkit扩展。它使您能够灵活地...
    编程 发布于2025-02-07
  • 如何从Google API中检索最新的jQuery库?
    如何从Google API中检索最新的jQuery库?
    从Google APIS 问题中提供的jQuery URL是版本1.2.6。对于检索最新版本,以前有一种使用特定版本号的替代方法,它是使用以下语法: https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js(google hosted...
    编程 发布于2025-02-07
  • 如何使用替换指令在GO MOD中解析模块路径差异?
    如何使用替换指令在GO MOD中解析模块路径差异?
    克服go mod中的模块路径差异 coreos/bbolt:github.com/coreos/ [email受保护]:解析go.mod:模块将其路径声明为:go.etcd.io/bbolt `要解决此问题,您可以在go.mod文件中使用替换指令。只需在go.mod的末尾添加以下行:[&& &...
    编程 发布于2025-02-07
  • 如何使用PHP将斑点(图像)正确插入MySQL?
    如何使用PHP将斑点(图像)正确插入MySQL?
    在尝试将image存储在mysql数据库中时,您可能会遇到一个可能会遇到问题。本指南将提供成功存储您的图像数据的解决方案。 easudy values('$ this-> image_id','file_get_contents($ tmp_image)...
    编程 发布于2025-02-07
  • 如何可靠地检查MySQL表中的列存在?
    如何可靠地检查MySQL表中的列存在?
    在mySQL中确定列中的列存在,验证表中的列存在与与之相比有点困惑其他数据库系统。常用的方法:如果存在(从信息_schema.columns select * * where table_name ='prefix_topic'和column_name =&...
    编程 发布于2025-02-07
  • 如何在没有错误的情况下在Python中创建空的凹痕块?
    如何在没有错误的情况下在Python中创建空的凹痕块?
    在编写python 但是,在某些情况下,您可能需要创建一个空的凹痕块来捕获和丢弃异常而不明确处理它们。为了实现这一目标,您可以使用“通过”语句。 Pass语句是Python中的空操作。将其放置在缩进块中时,它充当占位符,允许解释器在不执行任何实际代码的情况下正确地识别该块。尝试: #在这里...
    编程 发布于2025-02-07
  • 为什么PYTZ最初显示出意外的时区偏移?
    为什么PYTZ最初显示出意外的时区偏移?
    与pytz 最初从pytz获得特定的偏移。例如,亚洲/hong_kong最初显示一个七个小时37分钟的偏移: 差异源 考虑以下代码: < pre> import pytz [&& &&&&&&华&& && && && &&&华dt2 = hk.localize(dateTime(2012,1...
    编程 发布于2025-02-07
  • 如何在保持鼠标轮和箭头钥匙滚动的同时隐藏滚动条?
    如何在保持鼠标轮和箭头钥匙滚动的同时隐藏滚动条?
    在通过鼠标轮和箭头键启用滚动时隐藏scrollbars A:要完成此操作,请按照以下步骤:使用CSSS属性溢出:隐藏在目标div或身体上隐藏滚动条。 模仿鼠标轮滚动: javaScript或jquery。在函数中,修改目标div的scrolltop属性以仿真滚动。 : 绑定键盘事件(而不是Int...
    编程 发布于2025-02-07
  • Java是否允许多种返回类型:仔细研究通用方法?
    Java是否允许多种返回类型:仔细研究通用方法?
    在java中的多个返回类型:一个误解介绍,其中foo是自定义类。该方法声明似乎拥有两种返回类型:列表和E。但是,情况确实如此吗?通用方法:拆开神秘 [方法仅具有单一的返回类型。相反,它采用机制,如钻石符号“ ”。分解方法签名: :本节定义了一个通用类型参数,E。它表示该方法接受了扩展foo类的任...
    编程 发布于2025-02-07
  • 如何使用组在MySQL中旋转数据?
    如何使用组在MySQL中旋转数据?
    在关系数据库中使用mysql组使用mysql组来调整查询结果。在这里,我们面对一个共同的挑战:使用组的组将数据从基于行的基于列的基于列的转换。通过子句以及条件汇总函数,例如总和或情况。让我们考虑以下查询: select d.data_timestamp, sum(data_id = 1 tata...
    编程 发布于2025-02-07
  • 如何检查对象是否具有Python中的特定属性?
    如何检查对象是否具有Python中的特定属性?
    方法来确定对象属性存在寻求一种方法来验证对象中特定属性的存在。考虑以下示例,其中尝试访问不确定属性会引起错误: >>> a = someClass() >>> A.property Trackback(最近的最新电话): 文件“ ”,第1行, AttributeError:SomeClass实...
    编程 发布于2025-02-07
  • 我可以在CSS中使用SVG作为伪元素吗?
    我可以在CSS中使用SVG作为伪元素吗?
    使用svgs用作pseudo-element content css content properts允许在使用元素之前或之后使用元素插入各种类型的内容伪元素,例如::之前和::之后。但是,对可以包括哪些内容有限制。可以将svgs用作pseudo-element Content?,现在可以使用s...
    编程 发布于2025-02-07

免责声明: 提供的所有资源部分来自互联网,如果有侵犯您的版权或其他权益,请说明详细缘由并提供版权或权益证明然后发到邮箱:[email protected] 我们会第一时间内为您处理。

Copyright© 2022 湘ICP备2022001581号-3