Tailwind React中的边界间距
是指在使用Tailwind CSS框架进行React前端开发时，可以通过Tailwind CSS提供的类来设置元素之间的间距。
Tailwind CSS是一个高度可定制的CSS框架，它提供了一系列的CSS类，可以直接应用于HTML元素上，从而快速构建出各种样式。其中，边界间距相关的类主要包括以下几个：
- 外边距（Margin）：
m-4：设置所有方向的外边距为4个单位。mt-2：设置顶部外边距为2个单位。mr-6：设置右侧外边距为6个单位。mb-8：设置底部外边距为8个单位。ml-10：设置左侧外边距为10个单位。
- 内边距（Padding）：
p-3：设置所有方向的内边距为3个单位。pt-5：设置顶部内边距为5个单位。pr-7：设置右侧内边距为7个单位。pb-9：设置底部内边距为9个单位。pl-11：设置左侧内边距为11个单位。
这些类可以根据需要进行组合使用，以实现不同的边界间距效果。例如，可以通过将mt-2和ml-10应用于一个元素，来设置该元素的顶部外边距为2个单位，左侧外边距为10个单位。
Tailwind CSS的边界间距类具有以下优势：
- 快速：通过直接应用类名，无需手动编写CSS样式，可以快速设置元素的边界间距。
- 灵活：Tailwind CSS提供了丰富的边界间距类，可以根据具体需求进行组合使用，实现各种不同的布局效果。
- 可定制：Tailwind CSS允许开发者根据项目需求自定义样式，包括边界间距的大小、颜色等。
在实际应用中，Tailwind CSS的边界间距类可以用于各种场景，例如：
- 布局设计：通过设置不同的边界间距，可以实现页面元素的合理布局，提升用户体验。
- 响应式设计：可以根据不同的屏幕尺寸，使用不同的边界间距类，实现响应式布局。
- 表单设计：可以通过设置表单元素的边界间距，使表单更加美观易用。
腾讯云提供的相关产品和产品介绍链接地址如下：
请注意，以上链接仅供参考，具体产品选择应根据实际需求进行评估和决策。
相关·内容
2回答
我正在使用@material-tailwind/react in Next.JS应用程序。我从这里的示例中获得了以下代码：。在React中，我可以在selected上使用onChange函数，然后得到所选项的值，例如"e.target.value“。它如何与此组件一起工作？
import { Select, Option } from "@material-tailwind/react";
export default function Example() {
return (
<div className="w-72">
浏览 9提问于2022-10-14得票数 0
1回答
package.json "devDependencies": {
"tailwindcss": "^0.7.4"
},
"scripts": {
"tailwind:css": "tailwind build src/css/tailwind.src.css -c tailwind.js -o src/css/tailwind.css",
"start": "npm run tailwind:css && react-scr
浏览 13提问于2019-02-21得票数 1
2回答
由于某些原因，我不能让顺风rn真正的风格我的程序。当我运行expo时，这些项目没有对齐到中心，即使我把它放在代码中。
import { StyleSheet, Text, View, Button } from 'react-native';
import {TailwindProvider} from 'tailwind-rn';
import utilities from './tailwind.json';
import {useTailwind} from 'tailwind-rn';
export default fu
浏览 9提问于2022-07-16得票数 2
1回答
我正在使用下面的代码，但在应用程序中没有顺风类的影响。。
import React from 'react';
import {Text, View } from 'react-native';
import {useTailwind} from 'tailwind-rn';
export default function App() {
const tailwind = useTailwind();
return (
<View style={tailwind("flex-1 justify-center ite
浏览 4提问于2022-05-05得票数 0
我创建了一个React应用程序，然后将Tailwind集成到其中。当我运行npm start时，我得到了这个错误。
TypeError: Object.entries(...).flatMap is not a function[![enter image description here][1]][1]
TypeError: Object.entries(...).flatMap is not a function
at flattenColorPalette (/media/rishi/142468BD2468A408/web/tailwind-react-demo/node_mo
浏览 0提问于2020-11-19得票数 31
回答已采纳
2回答
我已经为我的项目配置了裁剪器，但是在npm run start之后，我得到了以下错误。
(node:7032) UnhandledPromiseRejectionWarning: Error: Expected a pseudo-class or pseudo-element. at D:\projects\frontend\example1\src\styles\tailwind.css:5:3，它指向下面的tailwind.css文件。
tailwind.css.
@tailwind base;
@tailwind components;
.input {
@apply focus:
浏览 10提问于2021-08-12得票数 3
1回答
我正在使用下面的代码，但在应用程序中没有顺风类的影响。任何帮助都是可以接受的。
import React from 'react';
import {Text, View } from 'react-native';
import {useTailwind} from 'tailwind-rn';
export default function App() {
const tailwind = useTailwind();
return (
<View style={tailwind("flex-1 justify
浏览 2提问于2022-02-04得票数 1
1回答
我试图在我的项目中设置顺风，但这似乎是不可能的。文档说您应该使用yarn add tailwind-rn来安装，然后使用npx setup-tailwind-rn来设置它。这是github页面上的代码示例：
import React from 'react';
import {SafeAreaView, View, Text} from 'react-native';
import {useTailwind} from 'tailwind-rn';
const Hello = () => {
const tailwind = us
浏览 4提问于2022-08-31得票数 0
我正在尝试扩展react本机库的默认导出的道具接口，但我很难使用它。
tailwind-provider.d.ts
import * as React from 'react';
import { ColorSchemeName } from 'react-native';
import { Utilities } from './types';
interface Props {
utilities: Utilities;
colorScheme?: ColorSchemeName;
}
declare const Tailwi
浏览 5提问于2022-05-10得票数 1
回答已采纳
2回答
顺风在单体建筑中不能正常工作
、、、、
我使用的是使用纱线工作区的monorepo体系结构，其中Tailwind CSS是该项目的基础。在我使用的一个工作区中，我使用了React，并在其样式中添加了Tailwind实用程序。顺风在这个项目中运行得还不错
每当我定义新颜色时，不是working.Moreover，我也想实现darkMode，在tailwind.config.js中添加了darkMode: 'class'，并制作了一个上下文包装器，将class=‘tailwind.config.js’设置为html根，关于更改<html class='dark'设置的主题，dark:bg-black
浏览 11提问于2022-02-01得票数 6
回答已采纳
我一直在将我的CRA项目升级到TailwindCSS 3，但是现在CSS嵌套不再有效了。启动服务器后，控制台将发出：
(8:3) Nested CSS was detected, but CSS nesting has not been configured correctly.
Please enable a CSS nesting plugin *before* Tailwind in your configuration.
See how here: https://tailwindcss.com/docs/using-with-preprocessors#nesting
然而，我不认为
浏览 34提问于2022-01-11得票数 11
回答已采纳
3回答
泰尔风安装问题
、、、
我正试着在我的反应项目上安装尾风。
我遵循了上的说明，并使用了Windows10。
我试着涂颜色，但效果不佳。
我猜index.css下面的代码是错的。
我在“顺风”下得到了这条橙色的波浪线，当我将它悬停时，它写着“未知规则@顺风”。
如果有人能在这个问题上有所帮助，我将不胜感激。
@tailwind base;
@tailwind components;
@tailwind utilities;
这是我的密码。
package.json
{
"name": "react-project",
"version": "0.1.0&
浏览 9提问于2022-08-22得票数 2
1回答
裁剪样式没有得到应用。可能会有什么问题？在tailwind.config.js文件中尝试了多种解决方案，但都没有奏效。
package.json :
{
"name": "twitter-clone",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"s
浏览 1提问于2022-05-12得票数 0
回答已采纳
2回答
我试图建立我的反应顺风一个打字项目。然而，我无意中发现了一个错误，我很难绕开。
@parcel/transformer-css: Unknown at rule: @tailwind
/home/sizzions/Projects/trials/owen/src/index.css:1:10
> 1 | @tailwind base;
> | ^
2 | @tailwind components;
3 | @tailwind utilities;
我的index.css文件
@tailwind base;
@tailwind co
浏览 9提问于2022-06-22得票数 0
我的项目一直在获取错误PostCSS plugin tailwindcss requires PostCSS 8时npm start。
是一样的，但是现在它已经老了，什么也不能用。PostCSS 8现在应该与Tailwind和CRA兼容，所以我安装了最新版本，但返回了相同的错误。我被困在这里近3天，所以我会感谢任何建议或意见！
我尝试过(但从未成功)：
降级为兼容版本的tailwindcss/postcss7-compat": "^2.2.17”、PostCSS ^7.0.39和autoprefixer": "^9.8.8
升级到tailwindcss:
浏览 11提问于2021-10-28得票数 1
回答已采纳
1回答
我正在尝试在Heroku上部署一个在前端使用顺风的MERN堆栈应用程序，但它返回给我‘构建失败’。
以下是Heroku的构建日志：
sh: 1: postcss: not found
npm ERR! code ELIFECYCLE
npm ERR! syscall spawn
npm ERR! file sh
npm ERR! errno ENOENT
npm ERR! web_page_react@0.1.0 build:tailwind: `postcss src/tailwind.css -o src/tailwind.generated.css`
npm ERR! spa
浏览 0提问于2020-08-01得票数 1
1回答
我有一个gatsby网站，它使用顺风作为npm的依赖项。在global.css中，我导入了@tailwind指令。
/* @tailwind preflight; */
@tailwind components;
@tailwind utilities;
/* @tailwind tailwind; */
@tailwind screens;
这个css文件被导入到index.js (react组件)中。但是，我有像这样的<section className="min-w-full mb-10 flex lg:justify-end sm:justify-center"&
浏览 2提问于2020-01-14得票数 0
1回答
这是我第二次为一个项目安装顺风rn，我根本无法让它工作。
我运行npm install tailwind-rn，然后运行npx setup-tailwind-rn，并在更改tailwind.config.js以扫描唯一的应用程序文件：content: ["./App.js"],之后，以开发模式运行它
同时，App.js文件看起来如下所示：
import React from 'react';
import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, View }
浏览 15提问于2022-07-28得票数 1
回答已采纳
我想用react.js制作一个项目，并使用tailwind.css进行样式设计，这有可能吗？以及如何
希望react.js和样式tailwind.css之间的合并可以在一个包中完成。
浏览 21提问于2022-11-24得票数 -1
1回答
我遵循了顺风网站上的教程，我不能将顺风应用到我的项目中。我真的不明白..。以下是我的档案:)
App.css
@tailwind components;
@tailwind utilities;
app.tsx
import { Pokemon } from "./Pokemon";
export default function App() {
return <Pokemon />;
}
index.css
@tailwind base;
@tailwind components;
@tailwind utilities;
index.tsx
impo
浏览 10提问于2022-11-14得票数 0
我正在尝试使用Tailwind开发一个React应用程序，所以我按照以下步骤进行操作： npx create-react-app cinetogo
cd cinetogo
npm i --save-dev autoprefixer postcss-cli tailwindcss
npx tailwind init tailwind.js
Create file 'postcss.config.js' in 'src' and add:
---
const tailwindcss = require('tailwindcss');
m
浏览 43提问于2020-09-16得票数 1
2回答
顺风css类没有显示，我按照安装过程通过tailwindcss.com创建-反应-应用程序来安装这个。经过反复检查，我似乎找不出为什么它仍然不起作用。我确实按照关于这个问题的答案的指示将react脚本更新为5.0.1版本，但它并没有解决这个问题。
这是package.json文件
{
"name": "my-react",
"version": "0.1.0",
"private": true,
"dependencies": {
"@testing-libr
浏览 16提问于2022-05-10得票数 1
尾风css v3.0.24没有在react应用程序中工作，我已经遵循了在官方网站上给出的所有步骤，但仍然没有起作用，我已经更新了我的react脚本版本，即使它不起作用。
这是我的密码。
tailwind.config.js
module.exports = {
content: [
"./src/**/*.{js,jsx,ts,tsx}",
],
theme: {
extend: {},
},
plugins: [],
}
src/index.css
@tailwind base;
@tailwind components;
@tailwi
浏览 8提问于2022-04-17得票数 0
嗨，我一直在绞尽脑汁想我到底做错了什么。在本地，格式是正确的，但当我将其推送到Netlify时，Tailwindcss决定不工作。我清除错误了吗？我的dist和src文件夹中有一个顺风css文件。 ? package.json {
"name": "bgg_version_3",
"keywords": [
"design, graphic design, art, illustration, web design, Virginia, Massachusetts, Boston, Newport News"
浏览 40提问于2021-08-19得票数 0
1回答
不适用顺风级
、、
我正在尝试使用Tailwind，但它似乎不起作用。下面的代码只显示为标准的处理字符串，而不是他们的示例中的按钮SVG。我做错了什么？有什么简单的方法来测试它是否实际安装和导入正确？
谢谢!
loading() {
return (
<div>
<button type="button" className="bg-rose-600 ..." disabled>
<svg className="animate-spin h-5 w-5 mr-3 .
浏览 1提问于2021-04-26得票数 1
1回答
我已经将tailwind.css配置为the项目，并根据
"scripts": {
"build:css": "postcss src/styles/index.css -o src/styles/tailwind.css",
"watch:css": "postcss src/styles/index.css -o src/styles/tailwind.css --watch",
"react-script:start": "timeout <5>
浏览 5提问于2022-04-28得票数 2
回答已采纳
我试图安装顺风(我已经做了很多次，没有问题)。请帮助我这一次错过的东西。
tailwind.config.js
module.exports = {
content: [
"./src/**/*.{js,jsx,ts,tsx}",
],
theme: {
extend: {},
},
plugins: [],
}
Package.json
....
"devDependencies": {
.....
"autoprefixer": "^10.4.2",
"p
浏览 2提问于2022-02-17得票数 1
顺风css 3.0.5不起作用。我已经安装了顺风css的官方安装指南的顺风css ()。下面是我写的代码。
package.json
{
"name": "react-complete-guide",
"version": "0.1.0",
"private": true,
"dependencies": {
"@testing-library/jest-dom": "^5.11.6",
"@testing-library/re
浏览 5提问于2021-12-18得票数 7
回答已采纳
1回答
项目是使用create-react-app创建的。未弹出。没有webpack配置。默认"react-scripts": "^3.4.0"..。打开dev版本没有错误。但在生产中，当用户长时间停留在一个页面上并点击链接时，它会显示白色页面，并在更新网站(部署新版本)后显示。此错误随机出现。控制台上的输出 意外的标记'<‘ 也没有其他信息。 这是我的package.json {
"name": "project-name",
"version": "2.0.0",
"
浏览 20提问于2020-02-25得票数 2
回答已采纳
我正在尝试创建一个独立的UI库，使用React和Tailwind。我正在使用Storybook测试组件。具体来说，不存在像Vite或Next.js这样的构建器。
在之后，我能够设置PostCSS来生成最终的CSS。唯一的问题是，当我进行代码更改(特别是tailwind.config.js)时，Storybook不会刷新。我在--watch中运行了postcss，但我怀疑它不会对tailwind.config.js进行更改。提高开发人员体验的最佳方法是什么？理想情况下，我希望每当PostCSS更改或任何React更改时都会触发tailwind.config.js。
这是我的最小回购：
以下是pa
浏览 15提问于2022-06-28得票数 0
回答已采纳
1回答
顺风运行良好，我使用这个文档来配置它()，然后我想添加颜色，所以我编辑了tailwind.config.js文件。但是在那之后，Tailwind停止了工作，尽管我删除了tailwind.config.js并重新执行了安装步骤。我的tailwind.config.js文件：
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
"./src/*.{html,js}",
"./public/*.{html,js}"
],
浏览 16提问于2022-07-12得票数 0
回答已采纳
我一直在寻找解决这个问题的办法。我用TypeScript创建了一个React应用程序，并使用Tailwind站点上显示的React设置安装了Tailwind。
下面是我的代码和配置。当我执行npm run start时，它成功地运行，但是没有应用尾风样式。
App.tsx
import React from 'react';
import logo from './logo.svg';
import './App.css';
function App() {
return (
<div className="items
浏览 6提问于2022-07-11得票数 2
回答已采纳
我创建了一个定制的React包，它构建在Tailwind之上，并将它作为一个DevDependency包括在内：
main.css：
@tailwind base;
@tailwind components;
@tailwind utilities;
tailwind.config.js：
module.exports = {
content: [
"./src/**/*.{js,jsx,ts,tsx}",
],
theme: {
extend: {},
},
plugins: [],
}
postcss.co
浏览 1提问于2022-05-26得票数 1
我在构建和导出我的TailwindCSS和NextJS项目时遇到了困难。在使用npm run dev时，这个项目工作得很好，我能够使用所有的Tailwind类。当我运行npm run build && npm run export时，所有的尾风CSS样式都消失了，生成的index.html文件没有任何CSS样式。
Package.json：
{
"name": "web",
"version": "0.1.0",
"private": true,
"scripts":
浏览 5提问于2021-07-31得票数 2
我以前见过这样的问题，但我似乎无法用我的处境来解决这个问题。
我正在使用搜索栏过滤数据下来，它的工作，但图像不会更新。传递给子节点的URL运行良好，但它只是没有改变其状态。我只是不知道如何实现它。
PokemonList.jsx
import axios from "axios";
import React, { useEffect, useState } from "react";
import PokemonSprite from "./PokemonSprite";
import Card from "@material-tailw
浏览 5提问于2022-02-24得票数 1
回答已采纳
好吧，所以我的问题不只是标题。我一直试图添加自定义的颜色在我的反应应用程序，并遇到了多个问题。
以下是我的一些代码：
// tailwind.config.js
module.exports = {
purge: [],
theme: {
colors: {
primary: "var(--color-primary)",
secondary: "var(--color-secondary)",
},
extend: {},
},
variants: {},
plugins: [],
};
//
浏览 1提问于2020-06-16得票数 6
回答已采纳
我在我的新react-native项目中使用了以下代码，以支持使用TailwindCSS的黑暗模式：
import React, { createContext, useState, useContext } from 'react';
import { Appearance } from 'react-native';
import { create } from 'tailwind-rn';
import styles from '../styles.json';
const { tailwind, getColor } =
浏览 2提问于2021-04-02得票数 1
1回答
当我停止输入时，我想提交一个表单，我正在使用react钩子表单，并在函数中调用handleSubmit，但它不起作用，请帮助我，这是我的代码，我正在做这段代码的映射，我已经尝试使用ref，但它不起作用。这是我的组件。 import React, {useRef} from 'react';
import {View, Text, TextInput, TouchableOpacity} from 'react-native';
import tailwind from 'tailwind-rn';
import {useDebounce} fr
浏览 36提问于2021-10-14得票数 0
这是我第一次使用打字稿和尾风。我已经遵循了创建反应应用程序的顺风指南，但是当我尝试运行npm start时，我得到了以下错误：
./src/index.css (./node_modules/css-loader/dist/cjs.js??ref--5-oneOf-4-1!./node_modules/postcss-loader/src??postcss!./src/index.css)
TypeError: Object.entries(...).flatMap is not a function
at Array.forEach (<anonymous>)
这是我的i
浏览 10提问于2020-12-11得票数 9
回答已采纳
1回答
我创建了一个插件并添加了对它的响应(使用@wordpress/script)。
我希望能够使用Tailwind在网站的前端编写代码。但是，当我加载尾风时，它会覆盖默认的主题样式(比如删除列表中的点，或链接的下划线)。
我尝试使用@wordpress/脚本实现react，并创建React。我试着用: CDN、Create和他们文档中显示的默认方式来实现Tailwind。结果总是一样的。
我还试图更改css队列的优先级，但它是相同的。
因此，目标是将react + Tailwind代码放在前端(例如，通过一个短代码)，而不干扰网站的其他部分(例如，默认样式)。
我的代码:
package.json
浏览 2提问于2021-09-11得票数 0
回答已采纳
1回答
我有一个基本的web服务器使用node.js，next.js，Webpack，和尾风CSS。
但是，当我运行服务器时，没有应用任何Tailwind样式，因此页面呈现时没有任何样式设置。
期望
实际
/styles/tailwind.css
@tailwind base;
@tailwind components;
@tailwind utilities;
/package.json
{
"name": "app",
"version": "1.0.0",
"main": "in
浏览 0提问于2020-10-08得票数 1
我试图用Turbopack TSX项目创建一个组件类：
import React from 'react';
import baseResolution from '@/lib/baseResolution';
export default class GameContainer
extends React.Component<{}, {resizeListener: Function | null}>
{
// ...
}
到目前为止，我还没有修改package.json中的任何内容。当我运行npm run dev并访问网页时，我
浏览 13提问于2022-12-03得票数 0
最近，我开始用React玩Tailwind。
(我用禤浩焯Twarog的在我的反应项目中安装了尾风。)
我想在我的页面上画一个h1，除了.
.事情就是这样的但对我来说，这是没有道理的！我已经把我的短信和所有东西集中起来了。
App.js
import React from "react";
function App() {
return (
<div className="container place-items-center">
<h1 className="text-7xl text-gray-
浏览 11提问于2021-08-16得票数 0
回答已采纳
1回答
我有一个用CRA创建的React应用程序，它编译和运行得很好。但是使用yarn buld和serve -s build构建的产品版本在控制台中显示以下错误： Uncaught TypeError: Cannot read property 'a' of undefined
at Object.M (main.a6de4952.chunk.js:1)
at w (main.a6de4952.chunk.js:1)
at 7.f8bc878d.chunk.js:2
at Array.forEach (<anonymous>)
a
浏览 16提问于2020-12-23得票数 3
回答已采纳
我使用Vite初始化了React应用程序，并且知道我正在尝试向这个应用程序添加顺风。
我从文档中直接完成了这些步骤，简单地说，这些类不应用于我的组件。
几天前，我用同样的方式初始化了React应用程序，遵循同样的指令，顺风也运行得很好。现在没有了，我真的找不到任何区别。
这是我的tailwind.config.js
module.exports = {
content: [
"./src/**/*.{js,jsx,ts,tsx}",
],
theme: {
extend: {},
},
plugins: [],
}
这是package.jso
浏览 3提问于2022-02-14得票数 1
回答已采纳
2回答
我一直在尝试在我的反应本土项目中使用顺风，但由于某种原因，它是行不通的。
我做了"npm安装顺风-rn“和"npx安装-顺风-rn”，但在我的应用程序中没有任何变化。
这是我的代码
import { StatusBar } from 'expo-status-bar';
import {SafeAreaView, View, Text} from 'react-native';
import {TailwindProvider, useTailwind} from 'tailwind-rn';
import utilities f
浏览 8提问于2022-03-09得票数 1
我遵循了安装react本机-rn的所有步骤。
一开始一切正常，但当我将input.css移到src/css/input.css时，它只生成src/css/tailwind.css，而不是src/css/tailwind.json文件。
我确实修改了package.json上的行，使它们看起来像这样。
"build:tailwind": "tailwindcss --input ./src/css/input.css -o ./src/css/tailwind.css --no-autoprefixer && tailwind-rn",
"
浏览 6提问于2022-02-25得票数 1
回答已采纳
下面是相同代码的主要app.js代码：
import React, { useState } from "react";
import {
StyleSheet,
Text,
View,
SafeAreaView,
TextInput,
Platform,
TouchableOpacity,
} from "react-native";
import tailwind from "tailwind-rn";
export default function App() {
const [task, setTask]
浏览 0提问于2021-10-25得票数 0
回答已采纳
我想在我的反应应用程序中使用尾风CSS，但它不起作用。我遵循了Tailwind站点上关于如何安装它的描述，但是CSS并没有被应用。
App.js
// import './App.css';
import './index.css';
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import Home from './Home/Home'
function App() {
浏览 10提问于2022-07-18得票数 2
这是我在package.json中的脚本。我使用create-react-app创建了一个项目，并希望引入顺风。
"build:css": "postcss src/theme/tailwind.css -o src/assets/styles.css",
"watch:css": "postcss -w src/theme/tailwind.css -o src/assets/styles.css",
"build": "npm run build:css && react-scripts
浏览 22提问于2020-05-23得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
腾讯会议
实时音视频活动推荐
腾讯云开发者
