当前位置：IT小站 > 如何在React上使用Tailwind CSS实现暗模式

如何在React上使用Tailwind CSS实现暗模式

作者 : IT 大叔 本文共3242个字，预计阅读时间需要9分钟 发布时间： 2020-09-28

今天，我将撰写有关如何使用Tailwind CSS实施Dark Mode的信息。Dark Mode现在是可用性的重要功能之一，如果尚未使用，则应在网站上实现。

不用担心 这很容易！

顺便说一句，GitHub上的完整示例在这里✌️

如何在React上使用Tailwind CSS实现暗模式插图

taishikato / 带有尾风CSS的黑暗模式

使用CRA CLI创建您的React应用

$ npx create-react-app dark

让我们将其托管在http：// local：3000上

$ cd dark
$ npm run start

现在，我相信您会在http://localhost:3000🎉 上看到此页面

如何在React上使用Tailwind CSS实现暗模式插图(2)

这次我们不需要了./src/App.css，因此删除文件并./src/App.js简化如下所示😸

import React from 'react';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

现在，该网站看起来更加简单。

如何在React上使用Tailwind CSS实现暗模式插图(4)

添加Tailwind CSS

让我们为Tailwind CSS添加软件包

$ npm i tailwindcss autoprefixer postcss-cli --save-dev

生成Tailwind CSS的配置文件。

下面的命令创建./tailwind.config.js。

$ npx tailwindcss init

加 postcss.config.js

内容看起来像这样。

module.exports = {
  plugins: [
    require('tailwindcss'),
    require('autoprefixer'),
  ],
};

制作一个样式表文件。

让我们在./src/tailwind.src.css下面添加一个赞。

@tailwind base;

@tailwind components;

@tailwind utilities;

添加脚本以生成CSS文件

tailwind:csson package.json在./src/tailwind.css您实际在React应用程序中使用时会构建一个CSS文件。

"scripts": {
+   "tailwind:css": "tailwind build src/tailwind.src.css -c tailwind.config.js -o src/tailwind.css",
     "start": "react-scripts start",
     "build": "react-scripts build",
     .
     .
     .

让start和build使用tailwind:css。

"scripts": {
  - "start": "react-scripts start",
  - "build": "react-scripts build",
  + "tailwind:css": "tailwind build src/tailwind.src.css -c tailwind.config.js -o src/tailwind.css",
  + "start": "npm run tailwind:css && react-scripts start",
  + "build": "npm run tailwind:css && react-scripts build",

因此，并非每次您使用启动或构建脚本时，它都会为您生成一个CSS文件👍

让我们进口tailwind.css的App.js

import React from 'react';
+ import ./'tailwind.css';

 function App() {
   return (

搞定！现在您的应用程序使用Tailwind CSS🌬️

使用Tailwind CSS对齐文本

只需尝试使用text-centerTailwind CSS中的类即可。现在，我们的App.js如下所示。

import React from 'react';
import './tailwind.css';

function App() {
  return (
    <div className="App">
      <header className="App-header text-center">
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

您的网页如下所示。

如何在React上使用Tailwind CSS实现暗模式插图(6)

为黑暗模式自定义Tailwind CSS

我们想这样使用dark:。在此示例中，当preferreds-color-scheme的值为时dark，bg-black变为有效。

<div className="dark:bg-black">

首先，我们需要定制tailwind.config.js以实现它😎

自定义screens属性

您的电流tailwind.config.js应如下所示。

module.exports = {
  future: {
    // removeDeprecatedGapUtilities: true,
    // purgeLayersByDefault: true,
  },
  purge: [],
  theme: {
    extend: {},
  },
  variants: {},
  plugins: [],
}

screens在下添加属性extend。

module.exports = {
  future: {
    removeDeprecatedGapUtilities: true,
    purgeLayersByDefault: true,
  },
  purge: ['./src/App.js'],
  theme: {
    extend: {
      screens: {
        dark: { raw: '(prefers-color-scheme: dark)' },
      },
    },
  },
  variants: {},
  plugins: [],
}

会发生什么！？

根据Tailwind CSS文档- 自定义媒体查询，我们可以创建自己的屏幕，这意味着tailwindcss命令将生成CSS，如下所示：

@media (prefers-color-scheme: dark) {
  .dark\:container {
    width: 100%;
  }

  @media (min-width: 640px) {
    .dark\:container {
      max-width: 640px;
    }
  }
  .
  .

让我们npm run start再次执行以生成一个新tailwind.css文件并检查文件👀

如何在React上使用Tailwind CSS实现暗模式插图(8)

工作正常！

暗模式

让我们将您的应用程序设为暗模式😈

只需添加dark:bg-black dark:text-white上App.js。

import React from 'react';
import './tailwind.css';

function App() {
  return (
    <div className="App dark:bg-black dark:text-white">
      <header className="App-header text-center">
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

现在它具有黑暗模式👽

如何在React上使用Tailwind CSS实现暗模式插图(10)

免责声明:
1. 本站资源转自互联网，源码资源分享仅供交流学习，下载后切勿用于商业用途，否则开发者追究责任与本站无关!
2. 本站使用「署名 4.0 国际」创作协议，可自由转载、引用，但需署名原版权作者且注明文章出处
3. 未登录无法下载，登录使用金币下载所有资源。
IT小站 » 如何在React上使用Tailwind CSS实现暗模式

常见问题FAQ

没有金币/金币不足 怎么办？
本站已开通每日签到送金币，每日签到赠送五枚金币，金币可累积。
所有资源普通会员都能下载吗？
本站所有资源普通会员都可以下载，需要消耗金币下载的白金会员资源，通过每日签到，即可获取免费金币，金币可累积使用。
IT 大叔

IT 大叔 普通

分享到：

发表评论

相关推荐

IT小站 ITxiaozhan.Cn

绿色，免费，综合网络资源交流学习下载平台
开发教程 运维手册 原版电子书 源码下载 模板下载 主题下载
按Ctrl+D收藏本站

IT人小站资源共享中心

WWW.ITXIAOZHAN.CN