标签: tailwind-css

我想将基本字体大小保持在 1rem，当用户在移动设备上查看时（低于 640px）将其更改为 .75rem（TW .class text-sm）

我认为这样做会起作用，但似乎会产生相反的效果：

<p class="text-base sm:text-xs">Some paragraph text</p>

Codepen 示例在这里

我正在尝试将 Tailwind.css 添加到 Vue.js 项目中。有很多关于如何执行此操作的资源，其中大多数都遵循与此视频相同的路径。为了确保我处于与视频中相同的条件，我使用vue-cli默认预设从头开始创建了一个 Vue 应用程序。在此步骤之后，我执行了以下操作：

• npm install tailwind.css
• 创造src/styles/tailwind.css
• 将以下内容添加到 css 文件中：

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

• 调用在项目根目录npx tailwind init创建文件tailwind.config.js
• postcss.config.js在项目的根目录下创建，并将以下内容添加到该文件中：

module.exports = {
  plugins: [require("tailwindcss"), require("autoprefixer")],
};

• 将自定义颜色添加到tailwind.config.js文件中：

module.exports = {   
  theme: {
    colors: {
      "awesome-color": "#56b890",
    },
    extend: {},
  },   
  variants: {},   
  plugins: [], 
};

• 将一个简单<p>元素添加到HelloWorld.vue生成的组件中vue-cli
• 尝试使用Tailwind类来设计它的样式

最后，问题是：我可以应用一些类，例如bg-awesome-colorortext-xl并让它们正确渲染，但许多其他类将无法工作。

例如，删除这些类并尝试改为bg-black, bg-orange-500, …

我有以下模板

<td class="px-6 py-4 whitespace-no-wrap border-b border-gray-200 text-sm leading-5 text-black-500">
    <i class="las la-circle-notch text-3xl"></i>
    <span>Provisioning</span>
</td>

现在模板呈现如下

正如您所看到的，文本Provisioning没有对齐。如何解决这个问题？

代码笔

我正在使用line Awesome 字体，类似于 font-awesome

我喜欢使用 tailwind css 将图像定位在另一个图像上，我想知道如何主要使用 tailwind 实用程序类来完成此操作。

现在我正在使用：

style="top: 200px; left: 260px;"

虽然它有效，但我喜欢使用顺风类，例如

class="top-200 left-260"

我尝试了几个顺风课程，但我无法让它发挥作用。

<div class="relative">
    <div>
      <img
        class="absolute mt-5 ml-0"
        src="@/assets/floor_image.jpg"
        width="600"
      />
    </div>
    <div>
      <img
        src="@/assets/blue_golf.png"
        style="top: 200px; left: 260px;"
        class="cursor-pointer absolute"
      />
    </div>
</div>

我将 tailwindcss 与 Next.JS 一起使用，并在每次第一次构建时都会出现此错误。它没有任何问题，但我不知道为什么我会得到这个。能否请你帮忙？

顺风.css

    /* purgecss start ignore */
@tailwind  base;
@tailwind  components;
/* purgecss end ignore */
@tailwind  utilities;

postcss.config.js

 const purgecss = [
    '@fullhuman/postcss-purgecss',
    {
        // Specify the paths to all of the template files
        content: [
            './layout/**/*.{js,jsx,ts,tsx}',
            './compoents/**/*.{js,jsx,ts,tsx}',
            './pages/**/*.{js,jsx,ts,tsx}'
        ],
        // This is the function used to extract class names from the templates
        defaultExtractor: (content) => {
            // Capture as liberally as possible, including things like `h-(screen-1.5)`
            const broadMatches = content.match(/[^<>"'`\\s]*[^<>"'`\\s:]/g) || [];
            // Capture …

我正在根据这个狮子座入门者开发我的盖茨比博客/网站。做了一些更改以添加适合我需要的功能，包括使用文件来编写页面和帖子，以便我可以在 MD 中添加 JS。.mdx

当工作和预览网站时，gatsby develop一切看起来都很好。现在，在进行生产时，.mdx不会渲染文件内组件中使用的 Tailwind 类。尝试将global.css包含的文件导入@tailwind utilities到 mdx 中，但没有成功。类出现在检查器中，但不在 CSS 中显示任何样式。

当 Tailwind 类在 tsx 或 js 文件中使用时，它们可以工作。但当我在 mdx 文件中使用这些类设置样式的组件中使用它们时，情况就不同了。

那么在构建产品站点和开发站点时真正发生了什么变化呢？我真的不知道下一步要尝试什么，因为没有任何错误或警告。

这是该网站的存储库。这是一个按钮不选择 Tailwind 类的示例。

为什么会出现这种情况？

谢谢你们！希望我带来了足够的信息。

干杯!

我正在尝试使用 Tailwind 为项目创建一个表单。对于这个项目，我需要创建某种类型的输入字段。当该字段获得焦点时，该字段的占位符应更改输入边框顶部的位置。使用 Tailwind 可以实现这一点吗？

这是我正在使用的输入的代码：

<input
      type="text"
      name="email"
      id="email"
      v-model="email"
      placeholder="Email address"
      class="my-2 px-4 py-2 border rounded-lg text-gray-700 focus:outline-none text-sm"

    />

这是一个如何在聚焦时显示输入的示例：

我试图在 React、Next.js 项目中使用 tailwind.css 将 svg 组件垂直和水平地放置在父 div 元素的中心。请让我知道我的代码哪里有问题。

对于下面粘贴的 png 中显示的当前结果，svg 图标不在其父 div 元素的中心。此外，父 div 与该行的同级 div 元素的高度不同。我想解决这两个问题。在我遵循 Juliomalves 先生的回答后，第二个粘贴的 png 显示了新的更好的结果。

//index.js

import { RedToBlueCols } from "../components/cols";

export default function Home() {
  return (
    <RedToBlueCols width="120" height="60">
      <div>
        <p>red</p>
        <p>red</p>
        <p>red</p>
        <p>red</p>
        <p>red</p>
      </div>
      <div>
        <p>blue</p>
        <p>blue</p>
        <p>blue</p>
        <p>blue</p>
        <p>blue</p>
      </div>
    </RedToBlueCols>
  );
}

//cols.js

import { RedToBlue } from "./mysvg";

export function RedToBlueCols(props) {
  return (
    <div className="w-screen flex flex-wrap flex-row ">
      <div className="w-2/12 "></div>
      <div …

Bootstrap提供了许多很棒的帮助实用程序[例如用于填充或弹性布局]，并且可以仅使用其 CSS 文件导入 [而不是 js 文件，它提供了其所有组件，如日历等]

那么，我可以用于Bootstrap这些辅助类和Angular Material组件吗？这是一个好主意吗？我什至可以选择TailwindCSS辅助类而不是 Bootstrap

假设我有这样的背景：

export const ThemeContext = createContext();

export function ThemeWrapper({ children }) {
  const sharedState = {
    darkMode: false,
  };

  return (
    <ThemeContext.Provider value={sharedState}>
      {children}
    </ThemeContext.Provider>
  );
}

export function useThemeContext() {
  return useContext(ThemeContext);
}

_document.js我可以这样访问：

import Document, { Html, Head, Main, NextScript } from "next/document";
import { ThemeWrapper, ThemeContext } from "../context/theme";

class MyDocument extends Document {
  static contextType = ThemeContext;
  render() {
    console.log("theme", this.context);
    return (
      <Html>
        <Head />
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  } …