标签: tailwind-css

我正在尝试使用 Tailwind CSS 将红色圆形按钮中的“x”居中。我尝试了很多 css 但没有任何效果。什么可以解决它？

https://play.tai​​lwindcss.com/Wz54NCHCI8

<button type="button" class="flex justify-center select-none bg-red-500 border-2 text-white
      text-xl font-bold p-2 m-2 rounded-full shadow h-20 w-20 focus:outline-none
      focus:shadow-outline"><img src="/icons/x.svg" alt="" width="40" h="40" class="icon svelte-1iu276v"></button>

刚刚开始在Next.js项目中使用tailwindcss。

我通过 CSS 文件进行设置，并尝试为 headers 设置一些基础知识h1，h2...但我喜欢稍微分离逻辑，这样它就不会变得太混乱，所以我尝试“@import”。/ typography.css' 其中包含一些顺风，但它不起作用。

这是我的基本 CSS 文件：

@tailwind base;
@tailwind components;
@tailwind utilities;
@tailwind variants;

@import './typography.css';

我的排版：

h1 {
    @apply text-6xl font-normal leading-normal mt-0 mb-2;
}
...

关于如何让它发挥作用有什么想法吗？

更新

我试过了：

• 添加@layer base到我的typography.css 文件中，但收到错误：Syntax error: /typography.css "@layer base" is used but no matching @tailwind base
• 还尝试在导入层执行此操作，例如@layer base { @import("typography.css") }，这不会产生错误，但不会应用样式。

我正在使用道具，我希望将“optionText”和“optionIcon”作为我能够添加的第一个，但我无法将图标实现为道具

我正在创建道具的文件

import Icon from "@mui/material/Icon";

function HeaderMenuOptions({ optionText, OptionIcon }) {
  return (
    <div className="flex items-center text-center">
      <Icon>{OptionIcon}</Icon>
      <h1 className="py-1 my-1 hover:bg-menu-option-hover hover:text-black cursor-pointer">
        {optionText}
      </h1>
    </div>
  );
}

export default HeaderMenuOptions;

我使用所述道具的文件

        <div className="absolute left-72 top-3 rounded-md bg-section w-[10rem] text-center">
          <p className="menu-header mt-2">VIEW OPTIONS</p>

          <div className="flex items-center justify-center space-x-2 mr-2 cursor-pointer hover:bg-menu-option-hover hover:hover:text-black group">
            <HeaderMenuOptions optionText="Night Mode" />
            <CheckBoxIcon
              defaultChecked
              onClick={() => alert("Light mode has not been added yet!")}
              className="cursor-pointer text-blue-500"
            />
          </div>

          <p className="menu-header">MORE STUFF</p>
          <HeaderMenuOptions optionText="Premium" …

我正在尝试使用 tailwindcss 插件表单，因此我通过 npm using 安装了它，npm install @tailwindcss/forms并在我的 tailwindconfig @tailwindcss/forms 的表单部分中添加了依赖项plugins: [ require("@tailwindcss/forms") ]。根据https://github.com/tailwindlabs/tailwindcss-forms，它现在必须处于活动状态，并且似乎确实已安装 - 至少在启动服务器后我没有收到错误。然而，当设置某些复选框的样式时，例如带有<input type="checkbox" class="rounded text-pink-500" />样式的复选框不会被应用。

我正在使用 Tailwind CSS 3.0 并根据使用预处理器对其进行配置文档对其进行配置。

我的main.css文件如下所示：

@import "tailwindcss/base";\n@import "./custom-base-styles.css";\n\n@import "tailwindcss/components";\n@import "./custom-components.css";\n\n@import "tailwindcss/utilities";\n

我的postcss.config.js看起来像这样：

module.exports = {\n  plugins: {\n    "postcss-import": {},\n    tailwindcss: {},\n    autoprefixer: {}\n  }\n}\n

目录结构如下所示：

Styles/v2\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 custom-base-styles.css\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 custom-components.css\n\xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 main.css\nwwwroot/dev\n\xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 v2\n    \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 main.css\n

我执行以下命令来构建我的main.css文件：

Styles/v2\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 custom-base-styles.css\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 custom-components.css\n\xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 main.css\nwwwroot/dev\n\xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 v2\n    \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 main.css\n

构建已执行并wwwroot/dev/v2/main.css生成了我的文件，但不包含在我的自定义样式中添加的任何其他更改。还; 该--watch参数正在侦听输入文件的更改main.css，但不是@import-ed 文件的更改。

Tailwind css 3.0.5 不适用于 React。我已经按照 tailwind css 的官方安装指南（https://tailwindcss.com/docs/guides/create-react-app）安装了 tailwind css。我写的代码如下。

包.json

{
  "name": "react-complete-guide",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.11.6",
    "@testing-library/react": "^11.2.2",
    "@testing-library/user-event": "^12.5.0",
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "react-scripts": "4.0.1",
    "web-vitals": "^0.2.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 …

我已经使用安装了 tailwind，npm install tailwindcss 然后创建了 src/style.css 文件并包含

    `@tailwind base;`
    `@tailwind components;`
    `@tailwind utilities;`

当我运行 build-css 命令时，我得到了一个生成的 output.css 文件，但该文件只有 425 行长。看起来它缺少组件和实用程序。当我将 HTML 链接到 output.css 时，我应用了基本的 tailwind css 样式，但实用程序完全没有效果。我已尽我最大的能力遵循这些文档以及几个教程，每次都得到相同的结果。不知道我做错了什么，我看过的图显示这个文件有数千行代码，而我的总是 425 行。

我有一张海报图像，我将用它作为背景图像。我从 MovieDb 获取它。我把它放在className中，就像 className={ bg-[url('${path}')] h-screen bg-cover bg-center text-white border-b-8 border-b-solid border-b-slate-400}一样。但它会抛出错误

./styles/globals.css:5:0
Module not found: Can't resolve './${path}'

Import trace for requested module:
./styles/globals.css
./pages/_app.js

https://nextjs.org/docs/messages/module-not-found

我还想添加browser.tsx文件

import { GetStaticProps } from "next";
import React from "react";
import { getData } from "./api/randomMovie";
import { getServerSideProps } from "./gr-en";

export default function Browse({ movies }) {
  console.log(movies);
  const { poster_path } = movies;
  const path =
    "https://www.themoviedb.org/t/p/w1280_and_h720_multi_faces/rYFAvSPlQUCebayLcxyK79yvtvV.jpg";
  console.log(path);
  return (
    <div
      className={`bg-[url('${path}')] h-screen …