詳解如何在Remix 中使用 tailwindcss

更新時(shí)間：2023年05月06日 14:30:04 作者：?jiǎn)讨蝊x

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

引言

從 v1.16.0 版本開(kāi)始 Remix 的對(duì) css 支持開(kāi)始穩(wěn)定。本文單獨(dú)詳細(xì)的介紹 remix css 方案之使用 tailwindcss 方法。

一、安裝 tailwindcss

npm create remix <your_app_name>
cd <your_app_name>
npm install -D tailwindcss

二、在 Remix 中啟動(dòng) tailwindcss 的支持

/** @type {import('@remix-run/dev').AppConfig} */
module.exports = {
  tailwind: true,
  // ...
};

三、初始化 tailwindcss 配置文件

npx tailwindcss init --ts

四、配置 tailwindcss 配置問(wèn)文件

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的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章:

相關(guān)文章

React?正確使用useCallback?useMemo的方式
這篇文章主要介紹了React?正確使用useCallback?useMemo的方式，文章圍繞主題展開(kāi)詳細(xì)的內(nèi)容介紹，具有一定的參考價(jià)值，需要的朋友可以參考一下
2022-08-08
React實(shí)現(xiàn)表格選取
這篇文章主要為大家詳細(xì)介紹了React實(shí)現(xiàn)表格選取，類似于Excel選中一片區(qū)域并獲得選中區(qū)域的所有數(shù)據(jù)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-08-08
聊一聊我對(duì) React Context 的理解以及應(yīng)用
這篇文章主要介紹了聊一聊我對(duì) React Context 的理解以及應(yīng)用，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2021-04-04
詳解react阻止無(wú)效重渲染的多種方式
這篇文章主要介紹了詳解react阻止無(wú)效重渲染的多種方式，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2018-12-12
React Router V4使用指南(精講)
這篇文章主要介紹了React Router V4使用指南(精講)，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2018-09-09
Zustand介紹與使用 React狀態(tài)管理工具的解決方案
本文主要介紹了Zustand,一種基于React的狀態(tài)管理庫(kù),Zustand以簡(jiǎn)潔易用、靈活性高及最小化原則等特點(diǎn)脫穎而出,旨在提供簡(jiǎn)單而強(qiáng)大的狀態(tài)管理功能
2024-10-10
react中useEffect函數(shù)的詳細(xì)用法(最新推薦)
useEffect是React中的一個(gè)Hook,用于在函數(shù)組件中處理副作用（如數(shù)據(jù)獲取、訂閱、手動(dòng)更改 DOM 等）,useEffect屬于組件的生命周期方法,下面通過(guò)本文給大家分享react中useEffect函數(shù)的詳細(xì)用法,感興趣的朋友跟隨小編一起看看吧
2024-06-06
antd?upload上傳如何獲取文件寬高
這篇文章主要介紹了antd?upload上傳如何獲取文件寬高問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-02-02
React Fragment 和空標(biāo)簽(＜＞＜/＞)用法及區(qū)別詳解
本文詳細(xì)介紹了React中的Fragment和空標(biāo)簽的使用,包括它們的區(qū)別、使用場(chǎng)景、性能考慮以及最佳實(shí)踐,本文給大家介紹的非常詳細(xì),感興趣的朋友跟隨小編一起看看吧
2025-01-01
useEvent顯著降低Hooks負(fù)擔(dān)的原生Hook
這篇文章主要為大家介紹了useEvent顯著降低Hooks負(fù)擔(dān)的原生Hook示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-07-07