Kirby + tailwind

Kirby 4 Question❓
1

Hello !
I am a total newbie and trying to setup kirby with tailwind to play around an learn.
Though I am not able to get it running. I picked the plain version and followed the instructions on the kirby site.

Some basic default font styles from tailwind seem to be applied, but nothing I am adding to the default.php works.

I am getting a warning in the console. Not shure if this is hinting to the problem:
“warn - No utility classes were detected in your source files. If this is unexpected, double-check the content option in your Tailwind CSS configuration.”

Iam greatfull for any hint :slight_smile:

Thanks

2

How does your tailwind.config.js look like? You basically have to tell tailwind where to look for the classes you apply. Based on the kirby plainkit it could look omething like this.

module.exports = {
  content: [
    './site/snippets/**/*.php',
    './site/templates/**/*.php',
  ],
  // ...
}
3

Thanks!

I tried your content entries, but it didn´t help.

I am testing it in the templates/default.php file with a color style.

4

I coded this page:

kgs-rastede.eu

It is using TailwindCSS 3.4.1

Here is the code: Carsten Niehaus / Homepage · GitLab

The whole css is generated with npm run watch

    "watch": "npx tailwindcss -i ./assets/css/tailwind.css -o ./assets/css/twkgs_shrinked.min.css --content './site/**/*.php' -w",
5

This is what I currently use in my config file but remember to be running a watch as well.

        /** @type {import('tailwindcss').Config} */
        module.exports = {
          darkMode: 'class',
          content: ["./site/**/*.{html,js,php}"],
          theme: {
            extend: {},
          },
          plugins: [],
        }
6

This is my config and it works

module.exports = {
  darkMode: "class",
  theme: {
    extend: {
      colors: {
        kgsblue: {
          dark: "#0e5499",
          light: "#8e9fcc",
        },
        kgsred: "#a34e1c",
      },
    },
  },
  variants: {},
  plugins: [require("@tailwindcss/typography")],
};
7

Thanks for the Reference Project.
I am already having a look to it for the structure. :+1:

8

Thanks for all the input!

I tried all the approaches and didn´t bring it to work yet.
I set up a test enviroment without kirby and there I managed to get tailwind to work.
Still clueless, why it won´t work in my kirby setup. :confused:

I am having a local setup with mamp as virtual server. Could this be a problem ?

9

Are you running this but tailored to your own settings?

npx tailwindcss -i ./src/input.css -o ./src/output.css --watch
10

I tried it with:
"watch": "npx tailwindcss -i ./src/css/tailwind.css -o ./assets/css/styles.css --content './site/**/*.php' -w",

and

"watch": "npx tailwindcss -i ./src/css/tailwind.css -o ./assets/css/styles.css -w",

11

I am also using MAMP, works

12

Trying to understand what you did so far.

Could you please:

  1. Post a screenshot of your folder structure
  2. Show the contents of your default.php template.

Following the cookbook recipe to the T should work absolutely fine.

13

Thanks for asking.
What I got atm

image
image161×740 11.5 KB

default.php

<!DOCTYPE html>
<html lang="en">
    
<head>

    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>
        <?= $page->title() ?>
    </title>
    <?= css('assets/css/styles.css') ?>


</head>

<body>
    <nav class="menu">
        <ul class="d-flex justify-content-center">
            <?php foreach ($site->children()->listed() as $item) : ?>
                <li><a href="<?= $item->url() ?>"><?= $item->title() ?></a></li>
            <?php endforeach ?>
        </ul>
    </nav>

    <h1>
        <?= $page->title() ?>
    </h1>
    <p>
        <?= $page->text() ?>
    </p>
    <div class="container mx-auto px-4 text-slate-500">testtest</div>
    <h1 class="text-emerald-500 m-5 text-3xl font-bold">testtest</h1>

</body>

</html>

tailwind.config.js

/* *@type {import('tailwindcss').Config} */

module.exports = {

  content: ['./site/**/*.{html,js,php}"'],
  
    theme: {
  
      extend: {},
  
    },
  
    plugins: [],
  
  };

package.json

{
    "name": "projectname",
    "scripts": {
        "watch": "npx tailwindcss -i ./src/css/tailwind.css -o ./assets/css/styles.css --content './site/**/*.php' -w",
        "build": "npx tailwindcss -i ./src/css/tailwind.css -o ./assets/css/styles.css --content './site/**/*.php' -m"
    },
    "dependencies": {
        "tailwindcss": "^3.4.1"
    }
}
14

Ok, that looks good to me. Then let’s remove the tailwind.config.js for the moment, as that is not necessarily needed, because package.json already points to the content to include

    "watch": "npx tailwindcss -i ./src/css/tailwind.css -o ./assets/css/styles.css --content './site/**/*.php' -w",

So with this in place, is the watcher you call with npm run watch running, so that changes you make are included in your styles?

Then make sure you clear your browser cache.

15

Tried it, but it didn´t help.

It doesn´t seem to rebuild anything when I set it to “watch”.
It is not rebuilding anything, when I save something in the “default.php”

16

Hm, I tested it earlier with a Plainkit and it works for me.

Bildschirmfoto 2024-01-14 um 14.31.43
Bildschirmfoto 2024-01-14 um 14.31.432824×2112 400 KB

Bildschirmfoto 2024-01-14 um 14.31.12
Bildschirmfoto 2024-01-14 um 14.31.12756×420 8.22 KB

Done exactly like in the cookbook recipe (styles are included in the header snippet), you see at the bottom that the watcher is running.

Maybe you get an error there?

17

Yay! Now it works with:

tailwind.config.js

content: ['./site/**/*.{html,js,php}"'],

package.json

"watch": "npx tailwindcss -i ./src/css/tailwind.css -o ./assets/css/styles.css -w",

If I run the package.json with
npx tailwindcss -i ./src/css/tailwind.css -o ./assets/css/styles.css --content './site/**/*.php' -w
It doesn´t build anything.

Though if i write the content path without the quotations, it works:
npx tailwindcss -i ./src/css/tailwind.css -o ./assets/css/styles.css --content ./site/**/*.php -w

Any idea why this is a problem for me?

Thanks a lot for all the help and suggestion! Really happy it works

18

Excellent, I’m glad you got it working. I love Tailwind; it’s so easy to work with but clutters up the pages if you have a lot of classes, but I am ok with that over having to spend a lot more time writing CSS.