标签: tailwind-css

我正在使用 alpineJS 和 TailwindCSS 制作滑块，但遇到过渡问题。请看一下下面的代码并指出我做错了什么。

<link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.0.2/tailwind.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/alpinejs/2.8.0/alpine.js"></script>

<div class="relative" x-data="{
            active: 1,
            loop() {
                setInterval(() => { this.active = this.active === 4 ? 1 : this.active+1 }, 3000)
            },
        }" x-init="loop">
  <div class="flex">
    <div class="bg-black">
      <img class="w-full h-96 object-cover opacity-30" alt="1" src="https://images.unsplash.com/photo-1454165804606-c3d57bc86b40?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80" x-show="active == 1" x-transition:enter="transition duration-1000"
        x-transition:enter-start="transform translate-x-full" x-transition:enter-end="transform translate-x-0" x-transition:leave="transition duration-1000" x-transition:leave-start="transform" x-transition:leave-end="transform -translate-x-full">
    </div>
    <div class="bg-black">
      <img class="w-full h-96 object-cover opacity-30" alt="2" src="https://images.unsplash.com/photo-1497366216548-37526070297c?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80" x-show="active == 2" x-transition:enter="transition duration-1000"
        x-transition:enter-start="transform translate-x-full" x-transition:enter-end="transform translate-x-0" x-transition:leave="transition …

我试图在默认 css 上构建 tailwindcss 但这个东西出现了......

   tailwindcss 2.0.2

   ? Building from default CSS... (No input file provided)

   ? SyntaxError: Unexpected token (26:33)
    at _class.pp$4.raise (C:\xampp\htdocs\www\css\node_modules\acorn\dist\acorn.
js:2927:15)
    at _class.pp.unexpected (C:\xampp\htdocs\www\css\node_modules\acorn\dist\aco
rn.js:698:10)
    at _class.pp.expect (C:\xampp\htdocs\www\css\node_modules\acorn\dist\acorn.j
s:692:28)
    at _class.pp$3.parseObj (C:\xampp\htdocs\www\css\node_modules\acorn\dist\aco
rn.js:2563:14)
    at _class.pp$3.parseExprAtom (C:\xampp\htdocs\www\css\node_modules\acorn\dis
t\acorn.js:2302:19)
    at _class.parseExprAtom (C:\xampp\htdocs\www\css\node_modules\acorn-node\lib
\dynamic-import\index.js:77:117)
    at _class.pp$3.parseExprSubscripts (C:\xampp\htdocs\www\css\node_modules\aco
rn\dist\acorn.js:2129:21)
    at _class.pp$3.parseMaybeUnary (C:\xampp\htdocs\www\css\node_modules\acorn\d
ist\acorn.js:2106:19)
    at _class.parseMaybeUnary (C:\xampp\htdocs\www\css\node_modules\acorn-node\l
ib\private-class-elements\index.js:122:54)
    at _class.pp$3.parseExprOps (C:\xampp\htdocs\www\css\node_modules\acorn\dist
\acorn.js:2041:21)

我尝试重新安装它，但没有任何变化...我该如何解决这个问题？

我一直在浏览各种教程，它们要么直接没有用，要么使用以前版本的VS和/或ASP.NET.

你如何安装 tailwind CSS在MVC project？

lib我希望他们在他们的资源文件中为每个人发布了copy并paste自由使用它。

使用 tailwindcss，我使页脚带有 2 个按钮“取消”和“保存”右对齐：

<div class="p-2 flex">
    <div class="w-1/2">Empty Space</div>
    <div class="w-1/2">
        <button type="submit" class="bg-gray-500 text-white p-2 rounded text-sm w-auto float-right">
            Cancel
        </button>
        <button type="submit" class="bg-yellow-500 text-white p-2 ml-6 rounded text-lg w-auto float-right ">
            Save
        </button>
    </div>
</div>

它有效，但我需要不同：保存后立即取消对齐，而不是按照我需要的那样。

哪种方式是正确的？

谢谢！

我有点失落。如果文本输入有值，无论是在页面加载时（如果输入已预填充）还是在用户输入值时，我都需要向标签添加一个类。如果用户从输入中删除文本，我需要删除这些类。

.has-value {color:red}

<script src="https://cdnjs.cloudflare.com/ajax/libs/alpinejs/2.3.0/alpine.js"></script>

<form x-data='{value:false}'>
  <label for='example' :class='{"has-value": value }'>Label </label>
  <input id='example' name='example' type='text' x-on:change='value = true' />
</form>

我在 Angular 应用程序中使用 Tailwind UI，可以使用以下命令打开/关闭汉堡菜单

<header>
  <div class="-mr-2 -my-2 md:hidden">
    <button type="button" (click)="toggleMobileMenu()"
      class="bg-white rounded-md p-2 inline-flex items-center justify-center text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500">
      <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"
        aria-hidden="true">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
      </svg>
    </button>
  </div>
  <div class="absolute z-30 top-0 inset-x-0 p-2 transition transform origin-top-right md:hidden" *ngIf="mobileMenuOpen">
    <div class="rounded-lg shadow-lg ring-1 ring-black ring-opacity-5 bg-white divide-y-2 divide-gray-50">

      <div class="flex items-center justify-between">
        <button (click)="toggleMobileMenu()" type="button"
          class="bg-white rounded-md p-2 inline-flex …

使用 NUXT 和 Tailwind 2 构建项目。我收到错误

错误：无法解析“@tailwindcss/base”

我的 package.json 文件是：

{
  "name": "vite-example",
  "version": "1.0.0",
  "private": true,
  "scripts": {
    "dev": "nuxt",
    "build": "nuxt build",
    "start": "nuxt start",
    "generate": "nuxt generate"
  },
  "dependencies": {
    "core-js": "^3.8.3",
    "nuxt": "^2.14.12"
  },
  "devDependencies": {
    "@nuxtjs/tailwindcss": "^3.4.2",
    "@tailwindcss/postcss7-compat": "^2.0.3",
    "autoprefixer": "^9.0.0",
    "nuxt-purgecss": "^1.0.0",
    "nuxt-vite": "0.0.36",
    "postcss": "^8.1.9",
    "postcss-import": "^12.0.1",
    "postcss-loader": "^3.0.0",
    "postcss-nested": "^5.0.5",
    "tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.0.3"
  }
}

我的 nuxt.config.js 文件有

build: {
  postcss: {
    plugins: {
      'postcss-import': {},
      tailwindcss: path.resolve(__dirname, './tailwind.config.js'),
      'postcss-nested': {}
    }
  }, …

我想将 div 分成具有个人高度的两部分。但是顺风的 flex 和 grid 类会将较小的孩子的高度拉伸到另一个孩子的高度。

目前看起来像这样

<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet"/>
<div class="flex flex-row">
  <div class="bg-green-500 w-1/2">
    <div class="h-4"></div>
  </div>
  <div class="bg-red-500 w-1/2">
    <div class="h-12"></div>
  </div>
</div>

如何达到个人身高？（Childs 的内容是通过编程设置的，并且并不总是具有相同的高度）

在 PhpStorm 2019.3.4 中，我在 laravel 8 应用程序中使用 tailwindcss 2，并安装了 tailwindcss 插件\n我发现：Tailwind Formatter、Tailwind CSS Smart Completions、Tailwind Intellisense\n但在很多情况下，当我在 PhpStorm 中看不到任何 tailwindcss 支持时需要它。在blade.php文件中有一行像

  ... \n  <div class="my-2 w-100 admin_content_text_color">\n</div>\n  ...\n

在类定义末尾添加 \xe2\x80\x9c px\xe2\x80\x9d 我想在现有的 tailwind\nclasses 上看到自动完成提示

Simialr 在我的自定义 resources/css/app.css 中

.editor_form_inactive_tab {\n    @apply text-gray-400y;\n}\n

输入 \xe2\x80\x9ctext-red-\xe2\x80\x9d 我没有看到任何我期望的自动完成提示。\n在我的 webpack.mix.js 中我有：

mix.js('resources/js/app.js', 'public/js')\n    .postCss('resources/css/app.css', 'public/css', [\n        require("tailwindcss"),\n    ]);\n

似乎我上面写​​的已安装插件中没有任何附加选项？

谢谢！

我希望文本具有模糊的白色背景。但我实际上正在努力应对模糊效果。每次我尝试使用滤镜模糊时，div 都会变得模糊，但我的文本会消失。

这是我迄今为止用 tailwindcss 编写的代码：

<div class="inline-block">
          <div class="px-1 filter blur bg-white bg-opacity-75">
            <span
              class="font-bold text-black-dark text-sm leading-17px z-1003"
            >
              {{ dynamicText }}
            </span>
          </div>
        </div>

它应该是这样的：

因为文本是动态的，所以我无法为父 div 元素设置固定的宽度或高度。有人可以帮助我实现上述期望的结果吗？