标签: tailwind-css

如何在 Tailwind 中将小尺寸的内容或项目居中。我做了 Tailwind 中可用的所有对齐类，但它不起作用。这是顺风V3

<div class="bg-white pb-8">
  <div class="p-4 pb-0 bg-third-bg sm:max-w-7xl mx-auto">
    <div class="sm:flex sm:max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 sm:items-center sm:justify-between bg-white p-6">
      <div class="sm:flex sm:flex-col sm:items-center sm:justify-center sm:space-y-4 md:w-4/12">
        <div class="sm:flex">
          <img src="https://educlever.beplusthemes.com/university/wp-content/uploads/2018/11/forma4.png" alt="" />
        </div>
        <div class="sm:flex text-xl font-bold">Lorem ipsum dolor sit</div>
        <div class="sm:flex sm:text-center">Lorem ipsum dolor sit amet, conse ct amet, conse adipiscing elit dolor sit a amet, conse adipisci</div>
      </div>
      <div class="sm:flex sm:flex-col sm:items-center sm:justify-center sm:space-y-4 md:w-4/12">
        <div class="sm:flex">
          <img src="https://educlever.beplusthemes.com/university/wp-content/uploads/2018/11/forma3.png" alt="" />
        </div> …

根据文档，Tailwind JIT（Just In Time）模式允许添加任意样式。

我无法让它适用于 CSS 网格的grid-template-areas属性。在这个简单的例子中，我只想要左侧的边线，右侧的主要内容。

请注意，我有更复杂的目标，我知道我不需要 CSS 网格来实现如此简单的布局。

• JIT 模式的工作原理是使用任意填充，例如px-[23px]Works。
• 问题就在这里：[grid-template-areas:'sider content']，就像您转到 CSS 选项卡一样，如果未注释，则有相同的属性可以工作。

这是一个游乐场：

<div class="grid [grid-template-areas:'sider content']">
  <sider class="[grid-area:sider]">SIDER</sider>
  <main class="[grid-area:content]">MAIN</main>
</div>

我正在努力获得以 Tailwind 为中心的网格布局。这是一个例子

    <div class="grid grid-cols-6 p-24 justify-center bg-slate-500">
        <div class="w-full p-8 col-span-2 justify-center justify-self-center mx-auto bg-slate-900 text-white text-center text-lg">
            2 cols, should be centered
        </div>
    </div>

看起来是这样的：

当然，我可以添加 col-start-2 然后它会居中，但是网格来自动态布局，我不知道是否有更多元素出现在同一行上。我尝试过 justify-center、justify-self-center、mx-auto，也尝试过 no-float，但没有任何效果。

有人有什么想法吗？

因此，我花了一段时间尝试隐藏网站某些页面中的导航和页脚组件，但遗憾的是没有运气。我在 Stackoverflow 上尝试了多种解决方案，其中只有一种通过创建一个新的布局组件然后将其放入路由中来部分工作，然后从登录页面中排除页脚和导航。但问题是它有效，但在主页上它只显示页脚和导航，中间没有像我在主页中所做的设计那样。

对我有用的唯一解决方案是创建 和 就像我在示例中所做的那样，但是我无法排除某些页面并将它们隐藏在那里......

这是它目前的样子，但不起作用：

import React from "react";
import Home from ".//Pages/Home";
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import Dashboard from "./Pages/Dashboard";
import Login from "./Pages/Login";
import Price from "./Pages/Price";
import ErrorPage from "./Pages/ErrorPage";
import Navbar from "./components/Navbar";
import Footer from "./components/Footer";
import Profile from "./Pages/Profile";

function App() {
  return (
    <Router>
      <nav>
        <Navbar />
      </nav>

      <Routes>
        <Route index element={<Home />} />
        <Route path="/Dashboard" element={<Dashboard />} />
        <Route path="/Login" element={<Login />} />
        <Route …

我想更改占位符文本的位置，例如margin-left: 10px和padding-left: 4px in Tailwind CSS.

<input type="text" name="name" placeholder="\xe0\xa6\xaa\xe0\xa7\x81\xe0\xa6\xb0\xe0\xa6\xbe\xe0\xa6\xa4\xe0\xa6\xa8 \xe0\xa6\xaa\xe0\xa6\xbe\xe0\xa6\xb8\xe0\xa6\x93\xe0\xa6\xaf\xe0\xa6\xbc\xe0\xa6\xbe\xe0\xa6\xb0\xe0\xa7\x8d\xe0\xa6\xa1 \xe0\xa6\xa6\xe0\xa6\xbf\xe0\xa6\xa8"  className=" placeholder-gray-500 placeholder-py-4 bg-red-400  focus:outline-none border rounded-xl h-12 w-160" />\n

有没有办法在顺风中实现类似于 w-min 的最小边距，我在文档中找不到它。我希望边距为屏幕的 1/5，但至少为 12（单位）。

我有一个div看起来像这样的课程className={`${cardSelected && 'shadow-factors'} bg-white rounded-md cursor-pointer`}

现在我正在设置页面的打印版本，我想知道是否可以使用 TailwindCSS 工具集以某种方式删除打印版本的阴影因素/框阴影？

我正在学习 Tailwind CSS。据我了解，如果你想设计一个元素的样式，你可以向它添加 Tailwind 实用程序 css 类。当我想要为多个相似的元素设置样式时该怎么办？例如，我有以下 HTML 片段：

<table id="t1">
<tr>
<td class="px-2 text-lg"></td>
<td></td>
<td></td>
</tr>
</table>

正如您所看到的，我有三个<td>元素，并且我设计了第一个元素。我希望它们看起来都一样。我应该向以下两个td元素添加相同的类吗？我觉得这种做法似乎不正确，但我不知道该怎么办。

tailwind css 类没有显示，我按照 tailwindcss.com create-react-app 的安装过程来安装它。交叉检查，我似乎找不到它仍然不起作用的原因。我确实按照与此问题相关的答案中的说明将反应脚本更新到版本 5.0.1，但它没有解决问题。

这是 package.json 文件

    {
  "name": "my-react",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.16.4",
    "@testing-library/react": "^13.1.1",
    "@testing-library/user-event": "^13.5.0",
    "react": "^18.1.0",
    "react-dom": "^18.1.0",
    "react-router-dom": "^6.3.0",
    "react-scripts": "^5.0.1",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version", …

代码的起点 从figma看应该是什么样子

我需要创建一个通知号码，如第二张图片所示，这是我在 Figma 中的模型。至于现在我那三个徽章是这样写的。

            <div className="mt-3">
              <span className="bg-indigo-100 text-indigo-800 text-xs font-semibold mr-2 px-2.5 py-0.5 rounded dark:bg-indigo-200 dark:text-indigo-900">
                Indigo
              </span>
              <span className="bg-purple-100 text-purple-800 text-xs font-semibold mr-2 px-2.5 py-0.5 rounded dark:bg-purple-200 dark:text-purple-900">
                Purple
              </span>
              <span className="bg-pink-100 text-pink-800 text-xs font-semibold mr-2 px-2.5 py-0.5 rounded dark:bg-pink-200 dark:text-pink-900">
                Pink
              </span>
            </div>

我正在使用 Storybook、Tailwind UI 和 React (18)。