详解如何在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事件对象无法获取offsetLeft,offsetTop,X,Y等元素问题及解决
这篇文章主要介绍了react事件对象无法获取offsetLeft,offsetTop,X,Y等元素问题及解决方案,具有很好的参考价值,希望对大家有所帮助。2022-08-08JavaScript中的useRef 和 useState介绍
这篇文章主要给大家分享的是 JavaScript中的useRef 和 useState介绍,下列文章,我们将学习 useRef 和 useState hook是什么,它们的区别以及何时使用哪个。 这篇文章中的代码示例将仅涉及功能组件,但是大多数差异和用途涵盖了类和功能组件,需要的朋友可以参考一下2021-11-11
最新评论