标签: tailwind-css

我正在尝试使用 React 应用程序添加 Tailwind CSS。我遵循顺风文档，如何使用反应设置顺风。

我尝试使用 tailwind 最新版本。我检查了 Nodejs 和 npm 是否安装完美。

但是当我运行它时npm run start总是出现错误。我无法解决这个问题。

包.json

{
  "name": "tailwind-css",
  "version": "0.1.0",
  "homepage": "",
  "private": true,
  "dependencies": {
    "@craco/craco": "^6.1.2",
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.5.0",
    "@testing-library/user-event": "^7.2.1",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-router-dom": "^5.2.0",
    "react-scripts": "^4.0.3"
  },
  "scripts": {
    "start": "craco start",
    "build": "craco build",
    "test": "craco test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "engines": {
    "npm": "6.14.6",
    "node": "12.18.4"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead", …

除了全局配置之外，是否有其他方法可以应用从tailwind.config.js到 例如的间隔间距单位？min-width到目前为止，这是我能看到的唯一方法，但这意味着复制所有（必要的）间距单位，这是我的观点的一个潜在的错误源，因为每个相关的空间都必须复制。

// Dummy code explaining what I want to achieve
.myButton{
  @apply bg-red-100 w-auto;
      
  min-width: @apply w-11 // Not working just for theoretical explanation 
     
} 

我需要使用 Tailwind CSS 在 Storybook 中编写一些按钮组件（而且我对 Storybook 和 Tailwind 都是全新的）。我需要将某些按钮的边框颜色更改为gray-800。我有 和border类，但仍然在元素的计算样式中border-gray-800得到。rgb(0,0,0)

这是按钮的完整类名："inline-flex justify-between items-center h-10 w-max p-1 pl-4 border border-gray-800 rounded-full"。任何其他样式都可以完美应用。可能是什么问题？

也许我必须首先在顺风配置中启用这种颜色或类似的东西？

谢谢！

更新：我还注意到，当我使用“text-gray-800”时，正确的颜色也没有应用于文本。

顺便说一句，编辑器也不会在悬停时显示此类的内容。

我正在启动一个新的 Next.js 项目，该项目具有现有的情感.js 样式，现在我正在尝试通过此指令添加 tailwind https://tailwindcss.com/docs/guides/nextjs

这是我的 postcss.config.js

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

和 tailwind.config.js

module.exports = {
    purge: [
        './pages/**/*.js', 
        './components/**/*.js',
        './lib/**/*/js'
    ],
    darkMode: 'class', // or 'media' or 'class'
    theme: {
        extend: {},
    },
    variants: {
        extend: {},
    },
    plugins: []
}

和 next.config.js

module.exports = {
    images: {
        domains: [
            'user-images.githubusercontent.com'
        ]
    },
    typescript: {
        ignoreBuildErrors: true
    },
    eslint: {
        ignoreDuringBuilds: true
    }
}

这是我在 /styles/global.css 中使用 Tailwind 的方法

@tailwind base; …

我的问题是我无法在移动视图上看到我的定价页面。顶级课程就是我所关注的。这是我的代码

<div data-target="pricing.yearlyPlans" class="mt-12 space-y-4 sm:mt-16 sm:space-y-0 sm:grid sm:grid-cols-1 sm:gap-6 md:grid-cols-2 xl:grid-cols-4">
  <%= render 'free_plan' %>
  <% Plan.yearly.sorted.each do |plan| %>
    <%= render layout: "subscriptions/styled_payment", locals: { plan: plan } do %>
      <%= link_to plan.name, new_subscription_path(plan: plan.id), class: "flex items-center justify-center mt-3 px-5 py-3 border border-transparent text-base font-medium rounded-md text-white hover:text-white bg-tertiary-500 hover:bg-gray-900" %>
    <% end %>
   <% end %>
</div>

查看文档，我想我只需要执行网格 grid-cols-1 但当我什么都不做时就会出现。该页面只是空白，任何屏幕尺寸上的定价都应如此

<div data-target="pricing.yearlyPlans" class="mt-12 space-y-4 grid grid-cols-1 gap-6 md:grid-cols-2  xl:grid-cols-4">
  <%= render 'free_plan' %>
  <% Plan.yearly.sorted.each do …

我正在尝试在我的 vue 2 项目中插入 headless ui popover 。我遇到这个错误

Uncaught TypeError: Object(...) is not a function
    at eval (headlessui.esm.js?d511:670)
    at Module../node_modules/@headlessui/vue/dist/headlessui.esm.js (chunk-vendors.js:23)
    at __webpack_require__ (app.js:849)
    at fn (app.js:151)
    at eval (cjs.js?!./node_modules/babel-loader/lib/index.js!./node_modules/cache-loader/dist/cjs.js?!./node_modules/vue-loader/lib/index.js?!./src/components/Navigations/Navbar.vue?vue&type=script&lang=js&:5)
    at Module../node_modules/cache-loader/dist/cjs.js?!./node_modules/babel-loader/lib/index.js!./node_modules/cache-loader/dist/cjs.js?!./node_modules/vue-loader/lib/index.js?!./src/components/Navigations/Navbar.vue?vue&type=script&lang=js& (app.js:998)
    at __webpack_require__ (app.js:849)
    at fn (app.js:151)
    at eval (Navbar.vue?7538:1)
    at Module../src/components/Navigations/Navbar.vue?vue&type=script&lang=js& (app.js:2161)

我的代码看起来像这样。

  <div v-if="isLoggedIn" class="flex space-x-2">
      <NotificationCenter />
      <Popover class="relative">
    <PopoverButton>Solutions</PopoverButton>

    <PopoverPanel class="absolute z-10">
      <div class="grid grid-cols-2">
        <a href="/analytics">Analytics</a>
        <a href="/engagement">Engagement</a>
        <a href="/security">Security</a>
        <a href="/integrations">Integrations</a>
      </div>
    </PopoverPanel>
  </Popover>
    </div>

在脚本内部，我像往常一样导入并添加了组件。

import { Popover, PopoverButton, PopoverPanel } …

hidden md:block我有一个 div，其中包含来自 Heroicon: 的该元素 的类<MenuIcon class="ml-1 mr-2 h-5 w-5 text-gray-500"/>。

目前，div 元素仅在屏幕尺寸为 时显示md，但我想显示 atmd 及以下，具体该怎么做？

我已经为我的项目配置了 tailwindcss，但是在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: outline-none focus:border-gray-500 p-3 border-2 text-lg font-light border-gray-200;
}

.btn {
  @apply py-3 px-5 bg-gray-800 text-white font-semibold mt-3 rounded-lg text-lg focus: outline-none hover:opacity-90;
}

@tailwind utilities;

package.json 中的脚本是

"scripts": {
    "tailwind:build": "npx tailwindcss -i ./src/styles/tailwind.css -o ./src/styles/styles.css",
    "apollo:codegen": "rimraf src/__generated__ && apollo client:codegen src/__generated__ --target=typescript --outputFlat",
    "start": "npm run apollo:codegen && npm run …

我正在使用 NextJS 和 Tailwind css 来设计顶部导航栏。我希望更改活动链接的文本颜色。下面是我的代码：

const Header = () => {
    return(
        <header>
            <nav className="sd:max-w-6xl mx-auto">
                <ul className="flex py-2">
                    <li className="mr-auto ml-4">
                        <Link href="/"><a><Image width={80} height={80} src="/images/brand-logo.png" alt="ECT Logo"/></a></Link>
                    </li>
                    <li className="mr-4 my-auto hover:text-indigo-600 font-normal font-serif text-brand-darkblue text-xl active:text-indigo-600">
                        <Link href="/"><a>Home</a></Link>
                    </li>
                    <li className="mr-4 my-auto hover:text-indigo-600 font-normal font-serif text-brand-darkblue text-xl active:text-indigo-600">
                        <Link href="/user/signup"><a>Join</a></Link>
                    </li>
                    <li className="mr-4 my-auto hover:text-indigo-600 font-normal font-serif text-brand-darkblue text-xl active:text-indigo-600">
                        <Link href="/user/login"><a>Login</a></Link>
                    </li> 
                </ul>
        </nav>
        </header>
    )

}

我还在 tailwind.config.css 中添加了以下内容：

module.exports = {
  #
  variants: …

我有一个带有两侧的仪表板，左侧是导航栏，右侧是主要内容，很简单。它们都由具有当前屏幕高度的主 div 容纳。我需要主要内容 div 在内部滚动，而不是在内容溢出时随整个视图滚动。与此同时，右侧的导航保持原样，而不受主内容 div 上内容溢出的影响

<main className=" flex flex-row h-screen">

<div className=" w-1/5 h-full flex flex-col flex-grow bg-purple-50">
////This is the side nav
</div>

<div className=" w-4/5 bg-gray-50 h-screen overscroll-auto">
  /// this is the main content div that i need the content inside to scroll internally
  /// what i mean by this is i dont want the whole page to move when there is a lot of content 
  /// just the content inside this div
</div>

</main>

我怎样才能实现这个目标