详解如何在Remix 中使用 tailwindcss
更新时间：2023年05月06日 14:30:04 作者：乔治_x
这篇文章主要为大家介绍了如何在Remix中使用tailwindcss方法详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
引言
从 v1.16.0 版本开始 Remix 的对 css 支持开始稳定。本文单独详细的介绍 remix css 方案之使用 tailwindcss 方法。
一、安装 tailwindcss
npm create remix <your_app_name> cd <your_app_name> npm install -D tailwindcss
二、在 Remix 中启动 tailwindcss 的支持
/** @type {import('@remix-run/dev').AppConfig} */
module.exports = {
tailwind: true,
// ...
};
三、初始化 tailwindcss 配置文件
npx tailwindcss init --ts
四、配置 tailwindcss 配置问文件
import type { Config } from "tailwindcss";
export default {
content: ["./app/**/*.{js,jsx,ts,tsx}"],
theme: {
extend: {},
},
plugins: [],
} satisfies Config;
五、在 app/tailwindcss.css 中初始化 tailwindcss 指定
- app/tailwind.css
@tailwind base; @tailwind components; @tailwind utilities;
六、在 root.tsx 中使用 links 函数
import type { LinksFunction } from "@remix-run/node"; // or cloudflare/deno
// ...
import styles from "./tailwind.css";
export const links: LinksFunction = () => [
{ rel: "stylesheet", href: styles },
];
小结
- 使用 tailwindcss 与其他工程化工具类似。不同的是 Remix 内置支持了Tailwindcss。需要做的就是安装包和配置 tailwindcss 内容。
- tailwindcss 好处是，一次配置之后，不再需要的单独的引入 css link 标签(remix links 函数)。
以上就是详解如何在Remix 中使用 tailwindcss的详细内容，更多关于Remix使用tailwindcss的资料请关注脚本之家其它相关文章！
相关文章
React 正确使用useCallback useMemo的方式
这篇文章主要介绍了React 正确使用useCallback useMemo的方式，文章围绕主题展开详细的内容介绍，具有一定的参考价值，需要的朋友可以参考一下2022-08-08
这篇文章主要为大家详细介绍了React实现表格选取，类似于Excel选中一片区域并获得选中区域的所有数据，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-08-08
这篇文章主要介绍了聊一聊我对 React Context 的理解以及应用，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-04-04
这篇文章主要介绍了详解react阻止无效重渲染的多种方式，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-12-12
这篇文章主要介绍了React Router V4使用指南(精讲)，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-09-09
本文主要介绍了Zustand,一种基于React的状态管理库,Zustand以简洁易用、灵活性高及最小化原则等特点脱颖而出,旨在提供简单而强大的状态管理功能2024-10-10
useEffect是React中的一个Hook,用于在函数组件中处理副作用（如数据获取、订阅、手动更改 DOM 等）,useEffect属于组件的生命周期方法,下面通过本文给大家分享react中useEffect函数的详细用法,感兴趣的朋友跟随小编一起看看吧2024-06-06
这篇文章主要介绍了antd upload上传如何获取文件宽高问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-02-02
React Fragment 和空标签(＜＞＜/＞)用法及区别详解
本文详细介绍了React中的Fragment和空标签的使用,包括它们的区别、使用场景、性能考虑以及最佳实践,本文给大家介绍的非常详细,感兴趣的朋友跟随小编一起看看吧2025-01-01
这篇文章主要为大家介绍了useEvent显著降低Hooks负担的原生Hook示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-07-07
最新评论