将tailwindcss添加到幸运框架

编程问答 2022-06-06

问题描述

我使用lucky框架创建了一个新项目，并希望添加tailwindcss。我使用以下步骤添加了它：

  1. 添加纱线tailwindcss（https://tailwindcss.com/docs/installation）
  2. npx tailwindcss初始化（https://tailwindcss.com/docs/configuration）
  3. 将其添加到webpack.mix.js（https://tailwindcss.com/docs/installation）
const convertToInt = (s) => {
    if (isNaN(s)) {
        throw `Parameter: ${s} is not a number!`;
    }
    const x = 1 * s;
    if (!Number.isInteger(x)) {
        throw `Parameter: ${s} is not a integer!`;
    }
    return x;
}

try {
    const start = convertToInt(prompt('Enter the start of the range ','1'));
    const end = convertToInt(prompt('Enter the end of the range ','10'));
    
    if (end <= start) {
        throw `Parameter end (${end}) is less or equal to start (${start})!`;
    }
    
    const n = end - start + 1;

    let total = 0;
    for (let i = start; i <= end; i++) {
        total += i;
    }

    const average = total / n;
    console.log(`The average of the numbers between ${start} and ${end} inclusive is ${average}.`)

} catch (e) {
    console.error(`Error: ${e}`);
}
  1. 在mix.postCss('src/css/main.css','public/css',[ require('tailwindcss'),]) 中添加了以下内容：
src/css/main.css

当我运行@import "tailwindcss/base"; @import "tailwindcss/components"; @import "tailwindcss/utilities"; 时，资产已编译，但文本没有更改，如以下基本示例所示：

lucky dev

我似乎错过了一些使它在此框架中运行的步骤。

解决方法

我认为您的webpack.mix.js内容不正确。

您可以在this RailsByte中看到如何在Lucky应用程序中设置Tailwind CSS，但基本上是：

在const tailwindcss = require("tailwindcss");顶部的某个位置添加webpack.mix.js。

假设您的Tailwind配置位于项目的根目录中，请将其添加到.options()中的webpack.mix.js哈希中：

processCssUrls: false,postCss: [ tailwindcss("./tailwind.config.js") ],

这些几乎都是来自Tailwind Guides本身的 Laravel Mix 设置的，这里：https://tailwindcss.com/docs/installation#build-tool-examples

laravel-mixlucky-frameworktailwind-css