詳解如何在Remix 中使用 tailwindcss

更新時間：2023年05月06日 14:30:04 作者：喬治_x

這篇文章主要為大家介紹了如何在Remix中使用tailwindcss方法詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

引言

從 v1.16.0 版本開始 Remix 的對 css 支持開始穩(wěn)定。本文單獨(dú)詳細(xì)的介紹 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 函數(shù)

import type { LinksFunction } from "@remix-run/node"; // or cloudflare/deno
// ...
import styles from "./tailwind.css";
export const links: LinksFunction = () =&gt; [
  { rel: "stylesheet", href: styles },
];

小結(jié)

使用 tailwindcss 與其他工程化工具類似。不同的是 Remix 內(nèi)置支持了Tailwindcss。需要做的就是安裝包和配置 tailwindcss 內(nèi)容。
tailwindcss 好處是，一次配置之后，不再需要的單獨(dú)的引入 css link 標(biāo)簽(remix links 函數(shù))。

以上就是詳解如何在Remix 中使用 tailwindcss的詳細(xì)內(nèi)容，更多關(guān)于Remix使用tailwindcss的資料請關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章:

相關(guān)文章

react-router-domV6版本改版踩坑記錄
這篇文章主要介紹了react-router-domV6版本改版踩坑記錄,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2024-03-03
react事件對象無法獲取offsetLeft,offsetTop,X,Y等元素問題及解決
這篇文章主要介紹了react事件對象無法獲取offsetLeft,offsetTop,X,Y等元素問題及解決方案，具有很好的參考價值，希望對大家有所幫助。
2022-08-08
React組件三大屬性之state,props,refs
這篇文章主要介紹了React組件三大屬性之state,props,refs,文章圍繞主題展開詳細(xì)的內(nèi)容介紹，具有一定的參考價值，需要的小伙伴可以參考一下
2022-07-07
基于antd的autocomplete的二次封裝查詢示例
這篇文章主要為大家介紹了基于antd的autocomplete的二次封裝查詢示例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
2023-08-08
react 中父組件與子組件雙向綁定問題
這篇文章主要介紹了react 中父組件與子組件雙向綁定問題，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值,需要的朋友可以參考下
2019-05-05
React項(xiàng)目如何使用Element的方法步驟
本文主要介紹了React項(xiàng)目如何使用Element的方法步驟，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2021-11-11
原生+React實(shí)現(xiàn)懶加載(無限滾動)列表方式
這篇文章主要介紹了原生+React實(shí)現(xiàn)懶加載(無限滾動)列表方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2023-03-03
React版本18.xx降低為17.xx的方法實(shí)現(xiàn)
由于現(xiàn)在react默認(rèn)創(chuàng)建是18.xx版本,但是我們現(xiàn)在大多使用的還是17.xx或者更低的版本,于是要對react版本進(jìn)行降級,本文主要介紹了React版本18.xx降低為17.xx的方法實(shí)現(xiàn),感興趣的可以了解一下
2023-11-11
JavaScript中的useRef 和 useState介紹
這篇文章主要給大家分享的是 JavaScript中的useRef 和 useState介紹，下列文章，我們將學(xué)習(xí) useRef 和 useState hook是什么，它們的區(qū)別以及何時使用哪個。這篇文章中的代碼示例將僅涉及功能組件，但是大多數(shù)差異和用途涵蓋了類和功能組件,需要的朋友可以參考一下
2021-11-11
React路由中的redux和redux知識點(diǎn)拓展
這篇文章主要介紹了React路由中的redux和redux知識點(diǎn)拓展，文章圍繞主題展開詳細(xì)的內(nèi)容介紹，具有一定的參考價值，感興趣的朋友可以參考學(xué)習(xí)一下
2022-08-08