详解如何在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 = () =&gt; [
  { rel: "stylesheet", href: styles },
];

小结

使用 tailwindcss 与其他工程化工具类似。不同的是 Remix 内置支持了Tailwindcss。需要做的就是安装包和配置 tailwindcss 内容。
tailwindcss 好处是，一次配置之后，不再需要的单独的引入 css link 标签(remix links 函数)。

以上就是详解如何在Remix 中使用 tailwindcss的详细内容，更多关于Remix使用tailwindcss的资料请关注脚本之家其它相关文章！

您可能感兴趣的文章:

React Native 通告消息竖向轮播组件的封装
这篇文章主要介绍了React Native 通告消息竖向轮播组件的封装，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-10-10
详解create-react-app 自定义 eslint 配置
这篇文章主要介绍了详解create-react-app 自定义 eslint 配置，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-06-06
React受控组件与非受控组件深入讲解
具体来说这是一种react非受控组件，其状态是在input的react内部控制，不受调用者控制。可以使用受控组件来实现。下面就说说这个React中的受控组件与非受控组件的相关知识，感兴趣的朋友一起看看吧
2022-12-12
D3.js(v3)+react 实现带坐标与比例尺的柱形图 (V3版本)
这篇文章主要介绍了D3.js(v3)+react 制作一个带坐标与比例尺的柱形图 (V3版本) ，本文通过实例代码文字相结合的形式给大家介绍的非常详细,需要的朋友可以参考下
2019-05-05
React中refs的一些常见用法汇总
Refs是一个获取 DOM节点或React元素实例的工具,在React中Refs 提供了一种方式,允许用户访问DOM 节点或者在render方法中创建的React元素,这篇文章主要给大家介绍了关于React中refs的一些常见用法,需要的朋友可以参考下
2021-07-07
react 不用插件实现数字滚动的效果示例
这篇文章主要介绍了react 不用插件实现数字滚动的效果示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-04-04
在React中应用SOLID原则的方法
SOLID 是一套原则，它们主要是关心代码质量和可维护性的软件专业人员的指导方针，本文给大家分享如何在React中应用SOLID原则，感兴趣的朋友一起看看吧
2022-07-07
React+TS+IntersectionObserver实现视频懒加载和自动播放功能
通过本文的介绍，我们学习了如何使用 React + TypeScript 和 IntersectionObserver API 来实现一个视频播放控制组件，该组件具有懒加载功能，只有在用户滚动页面且视频进入视口时才开始下载视频资源,需要的朋友可以参考下
2023-04-04
React Refs转发实现流程详解
Refs是一个获取 DOM节点或React元素实例的工具,在React中Refs 提供了一种方式,允许用户访问DOM 节点或者在render方法中创建的React元素,这篇文章主要给大家介绍了关于React中refs的一些常见用法,需要的朋友可以参考下
2022-12-12
React组件refs的使用详解
这篇文章主要介绍了React组件refs的使用详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-02-02