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