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

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

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

不用担心 这很容易!

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

使用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",
     .
     .
     .

startbuild使用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.cssApp.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的值为时darkbg-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-whiteApp.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

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

发表评论