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

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

不用担心这很容易！

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

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

使用CRA CLI创建您的React应用

$ npx create-react-app dark

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

$ cd dark
$ npm run start

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

这次我们不需要了./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;

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

添加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;

您的网页如下所示。

为黑暗模式自定义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文件并检查文件👀

工作正常！

暗模式

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

只需添加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;