Tailwind CSS居中我做错了什么？
Tailwind CSS是一个流行的CSS框架，它提供了一套可复用的样式类，帮助开发者快速构建现代化的用户界面。在使用Tailwind CSS进行居中布局时，可能会出现一些常见的错误。
- 忘记添加必要的类名：在使用Tailwind CSS进行居中布局时，需要添加一些特定的类名来实现居中效果。例如，使用flex布局时，可以添加
justify-center和items-center类名来水平和垂直居中元素。如果忘记添加这些类名，元素将无法居中。 - 使用错误的容器：在使用Tailwind CSS进行居中布局时，需要确保使用正确的容器。例如，使用flex布局时，需要将元素包裹在一个flex容器中，例如
<div class="flex justify-center items-center">...</div>。如果使用了错误的容器，居中效果可能无法正常工作。 - 未正确设置宽度和高度：在使用Tailwind CSS进行居中布局时，需要确保元素具有适当的宽度和高度。如果元素没有设置宽度和高度，或者宽度和高度设置不正确，居中效果可能会受到影响。
- 未正确使用响应式类名：Tailwind CSS提供了一套响应式的类名，可以根据不同的屏幕尺寸应用不同的样式。如果未正确使用响应式类名，居中效果可能在不同的屏幕尺寸下表现不一致。
为了解决这些问题，可以按照以下步骤进行排查和修复：
- 确保已正确添加必要的类名，例如
justify-center和items-center。 - 确保使用了正确的容器，例如使用flex布局时，将元素包裹在一个flex容器中。
- 检查并设置元素的宽度和高度，确保其具有适当的数值。
- 使用适当的响应式类名，根据需要在不同的屏幕尺寸下应用不同的样式。
关于Tailwind CSS的更多信息和使用方法，可以参考腾讯云的相关产品和文档：
相关·内容
我试着做一个静态的一个页面使用顺风网站。我在微软窗口上使用vscode。我完全遵循了上的安装说明，并将我的两个目录构造为/scr和/dist，如下所示。
成功地创建了输出css文件，没有任何错误，但是没有任何顺风广告的类。它仅为424行，并包含只设置默认值的css。有人知道如何让顺风来真正输出他们网站上显示的css类吗？
我的input.css文件是：
@tailwind base;
@tailwind components;
@tailwind utilities;
我做错了什么？
浏览 9提问于2021-12-10得票数 2
我有反应和尾风CSS安装。我是从世博会开始的。要创建应用程序，请执行以下操作。
这个简单的页面应该允许我有居中的文本和一个简单的按钮。
我的代码在下面，然后出现错误。任何帮助都将不胜感激。
import React from "react";
import { Button, StyleSheet, Text, View } from "react-native";
import { useTailwind } from "tailwind-rn";
import tailwind from "tailwindcss";
exp
浏览 12提问于2022-02-25得票数 1
1回答
我正在使用顺风css + next js。我无法从/fonts/rubik.woff2文件导入静态字体
//gobals.css
@tailwind base;
@tailwind components;
@tailwind utilities;
@fontface {
font-family: "rubik";
font-style: normal;
font-weight: 400;
font-display: fallback;
src: url(/fonts/rubik.woff2) format("woff2");
}
//tai
浏览 9提问于2022-11-13得票数 2
嗨，我一直在绞尽脑汁想我到底做错了什么。在本地，格式是正确的，但当我将其推送到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
我在Vue 3中使用Tailwind，看起来我不能在焦点上更改输入元素的边框宽度。我拥有我的index.css：
form-input {
@apply block appearance-none mb-1 bg-white w-full border border-gray-200 text-gray-700 py-3 px-4 pr-8 rounded leading-tight focus:outline-none focus:border-blue-500 focus:border-2 disabled:bg-gray-200
}
我得到了一个错误：focus:border-2
浏览 3提问于2022-01-11得票数 2
2回答
我试图让顺风清除我的文件上的CSS，但我似乎不能让它工作。
为了提供一些上下文，我有一个包含CSS文件夹和views文件夹的公用文件夹。我正在尝试清除views文件夹中的单个ejs文件。
这是我的tailwind.config.js
module.exports = {
purge: {
enabled: true,
content: ['./public/**/*.ejs']
},
theme: {},
variants: {},
plugins: [],
}
这是我的postcss.config.js
module.exports = {
plugin
浏览 0提问于2021-05-21得票数 0
1回答
首先，我想说明这个问题的标题类似于，但我尝试了答案，但它们是行不通的。
我首先从他们的官方CLI指南中尝试了Tailwind，但是这不起作用，所以我跟随进行了设置，但是Tailwind仍然不能工作。
在前面提到的问题中，有人指出，在从tailwind.cofig.js到HTML的路径中，您需要非常具体，但我做到了。
我的tailwind.config.js
module.exports = {
content: ['./*.html'],
theme: {
extend: {},
},
plugins: [],
}
这是我文件夹的截图：
这是i
浏览 3提问于2022-08-12得票数 0
我正在用Tailwind CSS在React中构建一个项目，我试图用<div className="container mx-auto">居中<div>元素，但它没有居中元素。代码有什么问题。 import React from "react";
import { NavLink } from "react-router-dom";
function NavBar() {
return (
<header className="bg-red-600">
<d
浏览 27提问于2020-12-15得票数 0
1回答
试图让尾风通过CLI指令来工作。我有一个(简化)文件结构
-public
-stylesheets
-styles.css
-tailwind.css
-views
-index
-index.pug
-page2.pug
-page3.pug
-user
-index.pug
-page2.pug
-includes
-templates
-header.pug
-footer.pug
我跟踪了安装文档和YouTube上的一个视频，试图让它正常工作，但是当我用以下方式设置tailwind
浏览 19提问于2022-04-05得票数 1
回答已采纳
我使用npm install tailwindcss安装了顺风，然后创建src/style.css文件，包括
`@tailwind base;`
`@tailwind components;`
`@tailwind utilities;`
当我运行build命令时，我会得到一个生成的output.css文件，但是这个文件只有425行长。看起来好像缺少了组件和实用程序。当我将我的HTML链接到output.css时，我得到了基本的顺风css样式，但是实用程序没有任何效果。我已经尽我最大的能力跟踪了这些文档以及几个教程，每次都有相同的结果。不知道我做错了什么，我看过的视频显
浏览 4提问于2021-12-25得票数 7
回答已采纳
我在我的项目中使用了剪裁器。我运行npm i tailwindcss -D，然后在style.css中编写以下代码：@tailwind base; @tailwind components; @tailwind utilities;，然后运行npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch。但是在我的output.css文件中，我只有400-500行代码。同时，cdn文件中包含了数千个。我做错什么了？
浏览 4提问于2022-01-07得票数 0
回答已采纳
如何让网格项在Tailwind中居中对齐，就像我们在Foundation中所做的那样 基础： <div class="grid-x grid-padding-x align-center-middle text-center" style="height: 200px;">
<div class="cell small-4">I am in the center-middle</div>
<div class="cell small-4">I am also central
浏览 39提问于2021-07-20得票数 0
回答已采纳
1回答
使用Tailwind CSS为网站上的所有文本指定默认值的正确方法是什么？
在tailwind.config.js中有这样的设置吗？
浏览 0提问于2021-02-22得票数 1
我有一个容器，里面有两个flex项目。最后一个flex项也是一个flex容器，它允许对flex项进行包装。我的目标是让最后一个flex项只占用所需的空间，这样当它的子项被包装时，两个主要的flex项可以在主flex容器中居中。
换句话说，我希望红色div只有必要的宽度，以便蓝色和红色div可以在绿色div中居中。无论我应用什么类，我似乎都不能让它工作。
在本例中，我使用了Tailwind类，但这仍然是一个常见的CSS问题。
<link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/1.1.4/tailwind
浏览 0提问于2020-01-06得票数 1
2回答
我有点挣扎，让尾风CSS与SASS和Webpack一起工作。从处理@tailwind preflight、@tailwind components和@tailwind utilities的角度来看，顺风的后置配置似乎并没有真正做任何事情。
我的安排如下：
layout.scss
@import "~tailwindcss/preflight.css";
@import "~tailwindcss/components.css";
.my-class {
@apply text-blue;
@apply border-red;
}
@i
浏览 1提问于2019-04-10得票数 9
1回答
我制作了一个生产应用程序。在开发过程中，我将tailwindcss与postcss和autoprefixer包结合使用。Tailwindcss在开发中工作，但是当我将它部署到生产中时，它没有工作。我试图重新安装顺风和其他软件包，但仍然没有成功。我还试图在tailwind.config.css文件中更改路径，但仍然没有工作。我不知道我做错了什么！这是我的tailwindcss和postcss配置文件
我正在使用Heroku主机
tailwindcss.config.js
/** @type {import('tailwindcss').Config} */
module.ex
浏览 12提问于2022-08-01得票数 0
在安装了Tailwind的Rails 7应用程序中，我使用以下形式：
<%= form_with(model: project) do |f| %>
<%= f.label :name, class: "some_tailwind_css_class" %>
<%= f.text_field :name, autofocus:true, class: "some_other_tailwind_css_class" %>
<%= f.submit class: "yet_another_ta
浏览 8提问于2022-07-15得票数 2
回答已采纳
2回答
我使用yarn create @vitejs/app my-app --template react-ts创建了一个新的react-ts应用程序。
我使用yarn add --dev tailwindcss@latest postcss@latest autoprefixer@latest安装了顺风。
我初始化了顺风：npx tailwindcss init -p。
我在postcss.config.js中设置了from和to
module.exports = {
from: 'src/styles/App.css',
to: 'src/styles/outpu
浏览 31提问于2021-02-20得票数 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回答
我使用的是Tailwind，我有一个网格布局，我希望不适合该列的子列被居中。我试过justify-items-center和place-items-center，但什么也没做。
在这个中，我希望后面的两个是居中的。
浏览 4提问于2022-04-05得票数 0
回答已采纳
1回答
嘿，我想从文件中添加一些自定义字体。
这些是我要加载的字体文件。
我的index.css
body {
margin: 0;
padding: 0;
}
@import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500&display=swap");
@tailwind base;
@tailwind components;
@tailwind utilities;
提前感谢
浏览 3提问于2022-03-04得票数 0
回答已采纳
在我的Next.js (9.4.4) / Tailwind.css (1.4.6)项目中，我使用了名为SpaceGrotesk的自定义字体。为了使其工作，我把我的字体我的public/fonts/spaceGrotesk，然后，我配置我的文件如下：
// next.config.js
module.exports = {
cssModules: true,
webpack: (config, options) => {
config.node = {
fs: "empty",
};
c
浏览 0提问于2020-06-21得票数 3
回答已采纳
1回答
我在建造工厂的时候很难让尾风工作。我遵循，顺风在服务时运行良好，但在构建应用程序时，它不识别来自HTML文件的任何类，因此不将它们包含在构建中
在构建时，我得到以下消息：warn - No utility classes were detected in your source files. If this is unexpected, double-check the content option in your Tailwind CSS configuration.
版本：
角CLI: 13.3.2
角: 13.3.2
节点: 16.15.0
包装经理: npm 7.10.
浏览 14提问于2022-05-24得票数 1
我正在尝试将CSS类库导入响应指令。
Animate.css包含一堆来自的类和关键帧动画。
我得到的错误是: CssSyntaxError：@apply不能与.fadeInRight一起使用，因为.fadeInRight要么找不到，要么它的实际定义包括一个伪选择器，如：.fadeInRight、:active等等。如果您确信.fadeInRight存在，请确保在Tailwind看到您的CSS之前，任何@import语句都被正确处理了，因为@apply只能用于同一个CSS树中的类。
最终目标是渲染不同的动画取决于屏幕大小的顺风方式。
即<div className="animate
浏览 2提问于2020-01-28得票数 0
我第一次使用尾风，使用我在网上找到的教程。到目前为止，npm已经安装了尾风、后置、后置装载机、自动复位器.在Tailwind文档中，我需要一个tailwind.config.js和postcss.config.js。
tailwind.config.js
module.exports = {
content: ["./client/*.{html,js}", "./client/**/*.{html,js}"],
theme: {
extend: {},
container: {
center: true,
},
浏览 9提问于2022-03-16得票数 1
我正在尝试将Tailwind v2.0安装到一个干净的Laravel安装中，但是它没有安装像.p-2这样的完整的CSS属性，也没有安装我遵循的正式安装的其他属性，但它仍然不是。
webpack.mix.js
const mix = require('laravel-mix');
/*
|--------------------------------------------------------------------------
| Mix Asset Management
|---------------------------------------------
浏览 5提问于2021-12-31得票数 0
回答已采纳
我有一个问题，自定义css在顺风和vite。我的maian.js看起来像：
import "./styles.css";
// import "tailwindcss/tailwind.css";
document.querySelector("#app").innerHTML = `
<h1>Hello Vite!</h1>
<a href="https://vitejs.dev/guide/features.html" target="_blank">Documen
浏览 28提问于2022-07-14得票数 0
enter code here//I installed and setup the things as instructed in tailwind docs but when I apply tailwind utility classes on my HTML file it is not working could anyone please help
//这是我的src/style.css
@tailwind base;
@tailwind components;
@tailwind utilities;
//我通过命令在公用文件夹中生成预构建CSS来构建脚本。在那里我创建了inde
浏览 2提问于2021-12-28得票数 2
我遵循了安装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
回答已采纳
3回答
所以我第一次尝试了太风CSS，我正在学习一个教程。我相信我已经遵循了教程，我们甚至没有取得任何进展，我似乎无法构建，我总是会遇到很多错误。
我是不是做错了什么？
package.json
{
"name": "Tailwind-learn",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"build:css":
浏览 0提问于2021-01-04得票数 1
我有以下postcss.config.js文件：
// postcss.config.js
module.exports = {
plugins: [
require('postcss-import'),
require('tailwindcss'),
require('autoprefixer'),
]
}
和以下tailwind.config.js文件：
// tailwind.config.js
module.exports = {
purge: [
&
浏览 10提问于2020-07-07得票数 2
1回答
我使用的是Windows 10和Node v14.15.4和npm 6.14.10 我已经成功执行了下面的命令 npm install -D tailwindcss@latest postcss@latest autoprefixer@latest postcss-cli cssnano onchange 这没有任何效果： "tw:prod": "SET NODE_ENV=production postcss build ./src/css/tailwind.css -o ./public/css/tailwind.css", 如果我去掉SET NODE_EN
浏览 25提问于2021-08-13得票数 0
我正在尝试使用Turborepo启动一个问题，其中许多应用程序将使用相同的组件。默认情况下，Turorepo为此设置了一个packages/ui项目，但我想对这个组件库使用Tailwind.css。
那个图书馆应该有什么好的设置？所有应用程序项目都需要Tailwind.css吗?还是库自身能够处理所有应用程序导入的CSS生成？
简而言之，是否有具有这种配置的模板Turborepo项目：
./apps
./app1 importing ui/styles.css (no Tailwind dep)
./app2 importing ui/styles.
浏览 13提问于2022-10-17得票数 0
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
我对Tailwind和CSS作为一个整体非常陌生，并且正在尝试构建这个CSS文件：
@tailwind base;
@tailwind components;
@tailwind utilities;
.btn{
@apply rounded-full py-2 px-3 uppercase text-xs font-bold cursor-pointer tracking-wider
}
用这个命令
npm run build-css
但我得到了这样的回应
> course@1.0.0 build-css C:\Users\user\Tailwind\project
>
浏览 1提问于2021-06-20得票数 1
回答已采纳
4回答
我有一个relative div。在这个div中，我想对图像进行居中(所以狗的脸是可见的)。我怎么能这么做？
<link href="https://cdn.jsdelivr.net/npm/tailwindcss/dist/tailwind.min.css" rel="stylesheet"/>
<div class="relative h-24 overflow-hidden">
<img class="absolute w-full h-auto" src="https:/
浏览 0提问于2019-05-07得票数 1
回答已采纳
1回答
在遵循TailwindCSS配置教程使用Next.js设置它时，顶层的.css文件如下所示：
@tailwind base;
@tailwind components;
@tailwind utilities;
我的问题是:这是做什么，它是如何抓取和利用顺风CSS文件？
浏览 7提问于2022-07-21得票数 0
1回答
几天来，我一直在努力让Tailwind课程与我的Svelte项目一起工作。我遵循了的确切步骤，但仍然没有任何效果。
以下是我的svelte项目的结构：
postcss.config.cjs代码：
const tailwindcss = require("tailwindcss");
const autoprefixer = require("autoprefixer");
module.exports = {
plugins: [require("tailwindcss"), require("autoprefixer
浏览 8提问于2022-06-20得票数 1
回答已采纳
我正在使用Vue和Tailwind，并且想要创建一个"NotFound“视图页面。此路由器视图中的内容应位于屏幕中央。上面的路由器视图是一个导航栏组件，所以我必须注意它居中时的高度。 首先，我尝试在路由器视图中使用h-screen <link href="https://unpkg.com/tailwindcss@1.8.12/dist/tailwind.min.css" rel="stylesheet"/>
<div>
<div class="bg-yellow-400 py-8">
浏览 109提问于2020-10-08得票数 2
回答已采纳
1回答
我的package.json中有一个脚本，代码如下：
"scripts": {
"build": "postcss tailwind/tailwind.css -o css/cenic.tailwind.css",
"watch": "postcss tailwind/tailwind.css -o css/cenic.tailwind.css --watch"
}
效果很好。但是如何让它输出到命令行的文本，比如
script ran at {{ date(now) }}
换句话说，当脚本运行时，我
浏览 2提问于2019-12-19得票数 12
回答已采纳
1回答
我正在用Reactjs应用程序构建一个网站，使用Tailwind JIT CSS，并使用Visual代码编辑器。我遇到了用VScode“编译保存”的问题。当我在文件中更改CSS时，App.js文件中的ex: App.js“ml-6”，然后保存该文件。然后VScode将自动编译和运行，但是当我检查浏览器是否有效时，没有什么改变。我认为VScode只对修改过的文件重新编译。因此，Tailwind JIT CSS没有编译。(请注意，为了更新CSS，必须重新编译Tailwind JIT。)我可以通过修改tailwind.config.js文件并保存它来解决这个问题。然后，VScode将重新编译Tail
浏览 6提问于2021-07-08得票数 1
我正在使用Laravel并在我的app.css中使用这个
@tailwind base;
@tailwind components;
@tailwind utilities;
@import 'animate/base.css';
@import 'animate/animations.css';
@layer components {
.ql-container {
@apply border-2 border-slate-300;
}
}
和postcss.config.js
module.exports = {
plug
浏览 12提问于2022-10-30得票数 0
回答已采纳
我刚开始使用TailwindCSS，并来自Bootstrap (v3，4和5)背景。
我已经阅读了Tailwind文档，并在许多用它构建的站点上注意到--包括Tailwind网站本身--它们具有带有“汉堡包”图标的移动导航菜单，该图标根据视口的不同而切换其可见性。
在Bootstrap中，这是可以实现的，因为Bootstrap附带了JavaScript，它可以用于呈现基于viewport：的切换<nav>的汉堡包图标
我对Tailwind的理解是，它没有任何等价的JavaScript，它只处理生成CSS。它通过运行npx脚本，扫描模板中的类，然后按照生成一个“输出”CSS文件来实现
浏览 9提问于2022-04-11得票数 0
回答已采纳
正如您可以从下面的图片中看到的，我的Next.js网页的产品生成和开发构建中的字体不同。在运行npm run build和npm start测试产品构建之后，蒙特塞拉特字体不再出现在我的网页上。
这就是我将字体导入我的globals.scss文件的方式。如果我做错了什么，请告诉我：
@tailwind base;
@tailwind components;
@tailwind utilities;
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;700&display=
浏览 0提问于2021-11-14得票数 2
回答已采纳
1回答
我正在使用一个带有顺风组件的包，我必须从这个包中导入app.css才能正确显示。
我也在我的项目中使用Tailwind，两者都有PurgeCSS，但是如果我作为production运行，并检查我的新app.css，我注意到有很多重复的类。
在我的app.css中，我有下面的代码：
@import "package-name/dist/app.css";
@tailwind base;
@tailwind components;
@tailwind utilities;
我必须做些什么来删除重复的类？
谢谢!
浏览 19提问于2021-02-25得票数 1
每当我尝试配置Tailwind，让它接受我的自定义字体时，它都会用tailwind.min.css覆盖tailwind.css文件。因此，更改不会显示出来。 ? 看，这些是我的文件。 // tailwind.config.js
const defaultTheme = require('tailwindcss/defaultTheme')
module.exports = {
purge: [
'./components/**/*.{vue,js}',
'./layouts/**/*.vue',
浏览 105提问于2021-10-10得票数 2
回答已采纳
我不确定如何恰当地表达这个问题。我正在学习Tailwind，我不禁注意到它是多么肮脏，因为html可以变成一个元素中不同类组合的巨大汤，我基本上必须对我基本上编写的每个公共元素重复它们。我可能做错了，所以请纠正我。
我想知道是否有一种方法可以将css类放在css声明中，可能使用css处理器？
.this-button {
.bg-red-500
.rounded-lg
.shadow-lg
.animate-bounce
}
我很确定这也可以用Javascript来实现。我希望使用Sass来解决这个问题，但是任何事情都可以。你们推荐在元素中管理long Tail
浏览 1提问于2021-03-20得票数 0
我想用react.js制作一个项目，并使用tailwind.css进行样式设计，这有可能吗？以及如何
希望react.js和样式tailwind.css之间的合并可以在一个包中完成。
浏览 21提问于2022-11-24得票数 -1
1回答
我不确定这是CSS/顺风错误，还是我做错了什么，但我在使用Tailwind时观察到了这种行为。
当在表中滚动时，容器似乎在滚动之前在容器结束的地方留下了一个边框。
这种情况发生在Chrome和Firefox上。
复制：
浏览 4提问于2020-12-27得票数 0
回答已采纳
1回答
这就是我的package.json文件的样子。 "scripts": {
"start": "yarn run watch-css && craco start",
"build": "yarn run build-css && craco build",
"test": "craco test",
"eject": "react-scripts eject",
"build-css":
浏览 12提问于2021-08-10得票数 1
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM活动推荐
腾讯云开发者
