文章/答案/技术大牛

发布

社区首页 >问答首页 >需要帮助为什么TailwindCSS不能工作？若按公理打开模态

问需要帮助为什么TailwindCSS不能工作？若按公理打开模态
EN

Stack Overflow用户

提问于 2021-11-15 19:35:07

回答 1查看 2.3K关注 0票数 0

我是初级程序员，我需要一些帮助来解决这个问题

我应该告诉你我用的是什么框架。我用了框架Laravel 8和Tailwindcss

首先，我运行"npm“代码，正常工作。

但是，如果我运行"npm prod“代码，通常也能工作。

但Tailwindcss在打开时不起作用

我需要一些帮助来修复它，或者解释一下代码发生了什么，为什么它不能工作？

更新：“图像”

索引页css正常工作

创建模式css不工作

layout.balde.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')
    
</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 更新显示表单

<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

Stack Overflow用户

发布于 2021-11-15 20:33:38

你的问题是你的"mix-prod": "mix --production"在package.json里面，但是没有人用这个.我不知道您为什么要更改它，但是您也应该将"prod": "npm run production",更改为"prod": "npm run mix-prod",，因为production已经不存在了，或者将mix-prod重命名为production (按照默认设置的方式)。

另外，我建议您使用mix.version()，这样您就可以对文件进行版本化。当您在dev中时，您将有一个正常的文件，但是当您在production中时，您将有一个缩小的文件，并且它将更改文件的URL，这样您就不会在客户端出现缓存问题。您可以阅读更多关于该这里的内容。

您的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标记移到了主体的末尾，所以您可以避免出现问题(可能是在正文之前加载文件，因此它将没有任何内容可处理)。

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/69979894

复制

相似问题

问需要帮助为什么TailwindCSS不能工作？若按公理打开模态
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问需要帮助为什么TailwindCSS不能工作？若按公理打开模态EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问需要帮助为什么TailwindCSS不能工作？若按公理打开模态
EN