TailwindCSS 配置可视化检查器

最新推荐文章于 2024-07-11 15:15:03 发布

乐闻x

最新推荐文章于 2024-07-11 15:15:03 发布

阅读量299

点赞数 1

分类专栏： TailwindCSS 通关指南文章标签：前端 css css3 TailwindCSS

本文链接：https://blog.csdn.net/m0_37890289/article/details/134917060

版权

8 篇文章 0 订阅

订阅专栏

文章介绍了TailwindCSS框架的复杂配置对初学者构成挑战，推荐了tailwind-config-viewer工具帮助查看项目中有效类和属性。该工具允许实时查看样式效果和自定义主题，降低开发者的学习和配置难度。

摘要由CSDN通过智能技术生成

问题

TailwindCSS 框架为我们提供了大量默认的类和属性，而且开发者也能够自定义类和配置。

对于初学者来说，这些配置其实是比较复杂的，这也是tailwindcss最大的入手成本，开发者的记忆负担和心智负担也都比较大。

有没有办法能够直观的看到项目中实际有效的类和属性呢？

NPM包
tailwind-config-viewer
https://npm.devtool.tech/tailwind-config-viewer

pnpm install tailwind-config-viewer
或
pnpm add tailwind-config-viewer

"scripts": {
  "tailwind-config-viewer": "tailwind-config-viewer -o"
}

npm run tailwind-config-viewer

如果你想直接查看TailwindCSS默认的配置效果，可以尝试访问链接https://rogden.github.io/tailwind-config-viewer/

开发的时候可以直接在页面上直观的看到样式的效果，以及如果能够定位自己设置的样式到底是不是正确的，到底存不存在。

// tailwind.config.js

module.exports = {
	...
  theme: {
    colors: ({ colors }) => {
      return { customColor: "red", ...colors };
    }
  }
};

TailwindCSS 配置可视化检查器

关注