需要帮助 为啥 TailwindCSS 不起作用？如果通过 axios 打开模态
Posted
技术标签:
【中文标题】需要帮助 为啥 TailwindCSS 不起作用？如果通过 axios 打开模态【英文标题】：Need Help Why doesn't TailwindCSS work? if open modal by axios需要帮助 为什么 TailwindCSS 不起作用？如果通过 axios 打开模态 【发布时间】：2021-12-26 23:37:47 【问题描述】：我是初学者，我需要一些帮助来解决这个问题
我应该告诉你我使用的是什么框架。 我使用框架 Laravel 8 和 Tailwindcss
首先我运行“npm run dev”代码正常工作
但是如果我运行“npm run prod”代码也正常工作
但 Tailwindcss 在打开模式时不起作用 我通过 axios 打开 modal
我需要一些帮助来修复它或向我解释代码发生了什么，为什么它不起作用？
更新：“图片”
index page css normally work
create modal css not work
layout.balde.php 在body标签下方更新Move Script标签并替换asset来混合
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>@yield('title')</title>
<link rel="stylesheet" href=" mix('css/app.css') ">
</head>
<body>
@include('menubar')
@yield('Content')
@yield('Modal')
</body>
<script src=" mix('js/app.js') "></script>
</html>
index.blade.php
@extends('layout')
@section('title','Index Laravel 8')
@section('Content')
All Content This area css normally work
@endsection
@section('Modal')
<div class="fixed hidden inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full" id="my-modal">
<div class="flex flex-col p-5 bg-white shadow-md hover:shodow-lg rounded-2xl mx-auto my-5 max-w-md">
<div class="mt-3">
<div id="modal-body"></div>
</div>
</div>
</div>
@endsection
create.blade.php 在 Create Modal 中更新 Show Form
<div class="flex items-center justify-between">
<h3 class="text-2xl">Model Title</h3>
<svg xmlns="http://www.w3.org/2000/svg" class="modal-close bg-transparent hover:text-red-500 h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-
d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
</div>
@if ($errors->any())
<div class="alert alert-danger">
<strong>Whoops!</strong> There were some problems with your input.<br><br>
<ul>
@foreach ($errors->all() as $error)
<li> $error </li>
@endforeach
</ul>
</div>
@endif
<form action=" route('Creating') " method="POST">
@csrf
<div class="my-2">
<div class="flex flex-col my-2">
<label for="nameprod" class="text-gray-700 my-2 select-none font-medium">Name1</label>
<input id="nameprod" type="text" name="nameprod" placeholder="Name1"
class="px-4 py-2 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-gray-200" />
</div>
<fieldset class="border p-3 font-medium">
<legend class="text-gray-700">Radio 1</legend>
<div class="grid grid-flow-col gap-1 text-gray-700">
<div>
<input type="radio" name="typeprod" id="type-1" value="1">
<label for="nameprod" class="my-2 select-none">Radio 1-1</label><br>
<input type="radio" name="typeprod" id="type-2" value="2">
<label for="nameprod" class="my-2 select-none">Radio 1-2</label><br>
<input type="radio" name="typeprod" id="type-3" value="3">
<label for="nameprod" class="my-2 select-none">Radio 1-3</label><br>
</div>
<div>
<input type="radio" name="typeprod" id="type-4" value="4">
<label for="nameprod" class="my-2 select-none">Radio 1-4</label><br>
<input type="radio" name="typeprod" id="type-5" value="5">
<label for="nameprod" class="my-2 select-none">Radio 1-5</label><br>
<input type="radio" name="typeprod" id="type-6" value="6">
<label for="nameprod" class="my-2 select-none">Radio 1-6</label><br>
</div>
</div>
</fieldset>
<fieldset class="border p-3 ">
<legend class="text-gray-700 font-medium">Name2</legend>
<input type="number" name="amountprod" id="amountprod" placeholder="Name2" value=""
class="px-4 py-2 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-gray-200 w-full"
autocomplete="off" oninput="rangeamount.value = this.value"/>
<input type="range" name="" id="rangeamount" min="0" max="100" oninput="amountprod.value = this.value"
class="slider" autocomplete="off" value="0">
</fieldset>
<fieldset class="border p-3 ">
<legend class="text-gray-700 font-medium">Name3</legend>
<input type="number" name="amountinbox" id="amountinbox" placeholder="Name3" value=""
class="px-4 py-2 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-gray-200 w-full"
autocomplete="off" oninput="rangeamountinbox.value = this.value"/>
<input type="range" name="" id="rangeamountinbox" min="0" max="100" value="0"
class="slider" autocomplete="off" oninput="amountinbox.value = this.value">
</fieldset>
<div class="flex flex-col my-2">
<label for="priceprod" class="text-gray-700 my-2 select-none font-medium">Name4</label>
<input id="priceprod" type="number" name="priceprod" placeholder="Name4" value=""
class="px-4 py-2 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-gray-200"
autocomplete="off" step="2"/>
</div>
</div>
<div class="my-3">
<button
class="flex-no-shrink bg-green-500 px-5 py-2 text-sm shadow-sm hover:shadow-lg font-medium tracking-wider border-2 border-green-500 text-white rounded-full "
type="submit">Button1</button>
<a id=""
class="modal-close cursor-pointer flex-no-shrink bg-red-500 px-5 py-2 text-sm shadow-sm hover:shadow-lg font-medium tracking-wider border-2 border-red-500 text-white rounded-full "
>Button2</a>
</div>
</form>
webpack.config.js 更新添加 Mix.inProduction 和 mix.version
const mix = require('laravel-mix');
mix.js('resources/js/app.js', 'public/js')
.postCss('resources/css/app.css', 'public/css', [
require('tailwindcss'),
]);
if (mix.inProduction())
mix.version();
tailwind.config.js
module.exports =
purge:
enable:true,
content: [
'./resources/views/*.blade.php',
'./resources/js/*.js'
],
,
darkMode: false, // or 'media' or 'class'
theme:
extend:
container:
center: true
,
colors:
transparent: 'transparent',
current: 'currentColor',
bluegray:
light: '#E2E8F0',
DEFAULT: '#64748B',
dark: '#334155',
,
gray:
darkest: '#1f2d3d',
dark: '#3c4858',
DEFAULT: '#c0ccda',
light: '#e0e6ed',
lightest: '#f9fafc',
,
,
variants:
extend: ,
,
plugins: [],
package.json 更新编辑“修复生产”命令
"private": true,
"scripts":
"dev": "npm run development",
"mix": "mix",
"watch": "mix watch",
"watch-poll": "mix watch -- --watch-options-poll=1000",
"hot": "mix watch --hot",
"prod": "npm run production",
"production": "mix --production"
,
"devDependencies":
"autoprefixer": "^10.4.0",
"axios": "^0.21",
"laravel-mix": "^6.0.6",
"lodash": "^4.17.19",
"postcss": "^8.3.11",
"tailwindcss": "^2.2.19"
app.js
window.onload = () =>
var modal = document.getElementById("my-modal");
var modalopen = document.querySelectorAll(".modal-open");
var modalbody = document.getElementById("modal-body");
//AddEvent Click with all modal-open class
for (i = 0; i < modalopen.length; i++)
modalopen[i].addEventListener('click', () =>
modal.style.display = "block";
create()
);
function create()
axios.get("/create").then(function (res)
modalbody.innerHTML = res.data
const modalclose = modalbody.querySelectorAll(".modal-close");
//AddEvent Click with all modal-close class
for (y = 0; y < modalclose.length; y++)
modalclose[y].addEventListener('click', () =>
modal.style.display = "none";
create()
);
)
【问题讨论】：
请编辑问题以将其限制为具有足够详细信息的特定问题，以确定适当的答案。 【参考方案1】：您的问题是您在package.json 中有"mix-prod": "mix --production"，但没有人使用它...我不知道您为什么更改它，但您还应该将"prod": "npm run production", 更改为"prod": "npm run mix-prod", 为@987654327 @ 不再存在，或者，将 mix-prod 重命名为 production（就像 default 一样）。
另外，我建议您使用mix.version()，这样您就可以对文件进行版本控制。当您在dev 中时，您将拥有一个普通文件，但当您在production 中时，您将拥有一个缩小的文件，并且它还将更改文件的 URL，因此您不要客户端没有缓存问题。你可以阅读更多关于here的信息。
您的webpack.config.js 将是这样的：
const mix = require('laravel-mix');
mix.js('resources/js/app.js', 'public/js')
.postCss('resources/css/app.css', 'public/css', [
require('tailwindcss'),
]);
if (mix.inProduction())
mix.version();
你的layout.blade.php 会是这样的：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>@yield('title')</title>
<link rel="stylesheet" href=" mix('css/app.css') ">
</head>
<body>
@include('menubar')
@yield('Content')
@yield('Modal')
<script src=" mix('js/app.js') "></script>
</body>
</html>
检查我是否使用了mix 而不是asset。而且我已经将script 标记移到正文的末尾，这样可以防止出现问题（可能文件在正文之前加载，所以它没有内容可以处理）。
【讨论】：
非常感谢有关缓存客户端的推荐，但我的问题仍然存在 你把mix-prod改成production了吗？
也没有用
你根本没有输出？这是不可能的……mix 或您的设置有问题。你能分享任何其他信息吗？
现在我更新了尝试检查我添加图像和编辑代码按照你的建议以上是关于需要帮助 为啥 TailwindCSS 不起作用？如果通过 axios 打开模态的主要内容，如果未能解决你的问题，请参考以下文章
为啥 tailwind css 在 iPhone ios 设备上不起作用？
为啥文本颜色在 Tailwind css + next.js 项目中不起作用
为啥某些 Tailwind 类在 JetStream 中不起作用？