需要帮助为什么 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-width="2"
            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()
                });
            }

        })
    }
}

【问题讨论】：

请编辑问题以将其限制为具有足够详细信息的特定问题，以确定适当的答案。

标签： php laravel axios laravel-blade tailwind-css

【解决方案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 或您的设置有问题。你能分享任何其他信息吗？
现在我更新了尝试检查我添加图像和编辑代码按照你的建议