如何在React上使用Tailwind CSS实现暗模式
今天,我将撰写有关如何使用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
🎉 上看到此页面
这次我们不需要了./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:css
on 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-center
Tailwind 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;
现在它具有黑暗模式👽
1. 本站资源转自互联网,源码资源分享仅供交流学习,下载后切勿用于商业用途,否则开发者追究责任与本站无关!
2. 本站使用「署名 4.0 国际」创作协议,可自由转载、引用,但需署名原版权作者且注明文章出处
3. 未登录无法下载,登录使用金币下载所有资源。
IT小站 » 如何在React上使用Tailwind CSS实现暗模式
常见问题FAQ
- 没有金币/金币不足 怎么办?
- 本站已开通每日签到送金币,每日签到赠送五枚金币,金币可累积。
- 所有资源普通会员都能下载吗?
- 本站所有资源普通会员都可以下载,需要消耗金币下载的白金会员资源,通过每日签到,即可获取免费金币,金币可累积使用。