Installing Tailwind with npm install tailwindcss@latest leads to this error:
mat@macbook kirbyproject % npm run watch
> watch
> npx tailwindcss -i ./src/css/tailwind.css -o ./assets/css/styles.css -w
npm error could not determine executable to run
This problem disappears with the previous version of Tailwind : npm install tailwindcss@3.4.17
Is there an easy way to get v4 up and running?
Then I tried to install DaisyUI, but the styles are not taken into account.
Do you know what I am doing wrong? Thanks a lot.
// style.css
// source can also be empty to scan "all"
@import "tailwindcss" source("../site/**/*.{html,js,php}");
@plugin "daisyui";
// @plugin "@tailwindcss/typography";
Like @tobimori said, the building process is a bit different because there is no config.tailwind.js file anymore, but the building process is actually more simple and fast.
Sorry to jump into a thread not created by me, but I just jumped to Kirby (Starter pack) and tried to install Tailwind 4 and DaisyUi (same as the OP). Unfortunately, it didn’t work very well for me
I got an error message in the browser inspector (attached). This is how my assets/css/style.css looks:
<?php
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<?php
/*
In the title tag we show the title of our
site and the title of the current page
*/
?>
<title><?= $site->title()->esc() ?> | <?= $page->title()->esc() ?></title>
<?php
?>
<?= css([
'assets/css/prism.css',
'assets/css/lightbox.css',
'assets/css/index.css',
'assets/css/style.css',
'src/output.css',
'@auto'
]) ?>
<?php
?>
<link rel="shortcut icon" type="image/x-icon" href="<?= url('favicon.ico') ?>">
</head>
The 404 error message that tailwindcss is missing disappeared but I would appreciate it if someone more experienced could confirm that the changes are OK.
As you can see I have added external css in the theme section. You don’t need js any more.
If Daisy UI can give you plain css. Just import it. TW4 is much simpler than 3
Something looks wrong here. The files that contain your @import statements are the input files (-i) and should be in the src folder. Whatever you call the result of the build process css file (-o) should end up in the assets/css folder. Then the files in the assets folder should be loaded in your head. If I understand the bits and pieces you posted so far correctly, you are doing it the wrong way round.
This didn’t work for me. Something about that syntax in my setup kept throwing errors.
So i use the @sourcesource syntax. Tailwind CLI reads everything not listed in .gitignore as text so It has no use of the .extensio@source The @source directive overrides the default TW source setting.
So if you permit the site folder in .gitignore you shouldn’t need to specify source at all.
I see that you are specifying –content in your npm cli command. Do one or the other. Not both.
I see from DaisyUI that they use all directives in the css not CLI.
I think the original Kirby post is probably outdated.
Yeah. Probably a full time job reviewing this content. Probably they should append these posts with currency meta-data in a footer. ie Dev enviro : [ K4 + , TW3 , php8.x ].
All this explores any thin wall between content and style in the blueprint space.
I think the Kirby crew have addressed this well with default block overrides and extendable layout hooks.
I’ve updated the recipe for Tailwind CSS v4. I didn’t include information about adding DaisyUI specifically, but that should be pretty straight forward. Please take a look:
