# Kirby + tailwind

**URL:** <https://forum.getkirby.com/t/kirby-tailwind/30494>\
**Category:** Questions\
**Tags:** v4\
**Created:** [January 13, 2024, 2:43pm UTC](https://forum.getkirby.com/t/kirby-tailwind/30494 "2024-01-13T14:43:04Z")\
**Posts on this page:** 18\
**Page:** 1

<div class="post-metadata">

**Author:** ![OPopp](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/opopp/32/14961_2.png) [@OPopp](https://forum.getkirby.com/u/OPopp)\
**Post date:** [January 13, 2024, 2:43pm UTC](https://forum.getkirby.com/t/kirby-tailwind/30494/1 "2024-01-13T14:43:04Z")

</div>

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 🙂

Thanks

---

<div class="post-metadata">

**Author:** ![lukaskleinschmidt](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/lukaskleinschmidt/32/13388_2.png) [@lukaskleinschmidt](https://forum.getkirby.com/u/lukaskleinschmidt)\
**Post date:** [January 13, 2024, 3:07pm UTC](https://forum.getkirby.com/t/kirby-tailwind/30494/2 "2024-01-13T15:07:31Z")

</div>

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.

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

```

---

<div class="post-metadata">

**Author:** ![OPopp](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/opopp/32/14961_2.png) [@OPopp](https://forum.getkirby.com/u/OPopp)\
**Post date:** [January 13, 2024, 3:52pm UTC](https://forum.getkirby.com/t/kirby-tailwind/30494/3 "2024-01-13T15:52:11Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![carsten\_kgs](https://avatars.discourse-cdn.com/v4/letter/c/5f8ce5/32.png) [@carsten\_kgs](https://forum.getkirby.com/u/carsten_kgs)\
**Post date:** [January 13, 2024, 4:05pm UTC](https://forum.getkirby.com/t/kirby-tailwind/30494/4 "2024-01-13T16:05:59Z")

</div>

I coded this page:

[kgs-rastede.eu](https://kgs-rastede.de)

It is using TailwindCSS 3.4.1

Here is the code: [Carsten Niehaus / Homepage · GitLab](https://gitlab.com/cniehaus/homepage/)

The whole css is generated with `npm run watch`

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

```

---

<div class="post-metadata">

**Author:** ![SCC](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/scc/32/4116_2.png) [@SCC](https://forum.getkirby.com/u/SCC)\
**Post date:** [January 13, 2024, 5:31pm UTC](https://forum.getkirby.com/t/kirby-tailwind/30494/5 "2024-01-13T17:31:14Z")

</div>

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

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

```

---

<div class="post-metadata">

**Author:** ![carsten\_kgs](https://avatars.discourse-cdn.com/v4/letter/c/5f8ce5/32.png) [@carsten\_kgs](https://forum.getkirby.com/u/carsten_kgs)\
**Post date:** [January 13, 2024, 11:04pm UTC](https://forum.getkirby.com/t/kirby-tailwind/30494/6 "2024-01-13T23:04:38Z")

</div>

This is my config and it works

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

```

---

<div class="post-metadata">

**Author:** ![OPopp](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/opopp/32/14961_2.png) [@OPopp](https://forum.getkirby.com/u/OPopp)\
**Post date:** [January 14, 2024, 10:41am UTC](https://forum.getkirby.com/t/kirby-tailwind/30494/7 "2024-01-14T10:41:51Z")

</div>

Thanks for the Reference Project.  
I am already having a look to it for the structure. 👍

---

<div class="post-metadata">

**Author:** ![OPopp](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/opopp/32/14961_2.png) [@OPopp](https://forum.getkirby.com/u/OPopp)\
**Post date:** [January 14, 2024, 10:44am UTC](https://forum.getkirby.com/t/kirby-tailwind/30494/8 "2024-01-14T10:44:14Z")

</div>

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. 😕

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

---

<div class="post-metadata">

**Author:** ![SCC](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/scc/32/4116_2.png) [@SCC](https://forum.getkirby.com/u/SCC)\
**Post date:** [January 14, 2024, 10:47am UTC](https://forum.getkirby.com/t/kirby-tailwind/30494/9 "2024-01-14T10:47:14Z")

</div>

Are you running this but tailored to your own settings?

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

```

---

<div class="post-metadata">

**Author:** ![OPopp](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/opopp/32/14961_2.png) [@OPopp](https://forum.getkirby.com/u/OPopp)\
**Post date:** [January 14, 2024, 11:01am UTC](https://forum.getkirby.com/t/kirby-tailwind/30494/10 "2024-01-14T11:01:00Z")

</div>

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",`

---

<div class="post-metadata">

**Author:** ![carsten\_kgs](https://avatars.discourse-cdn.com/v4/letter/c/5f8ce5/32.png) [@carsten\_kgs](https://forum.getkirby.com/u/carsten_kgs)\
**Post date:** [January 14, 2024, 11:06am UTC](https://forum.getkirby.com/t/kirby-tailwind/30494/11 "2024-01-14T11:06:50Z")

</div>

I am also using MAMP, works

---

<div class="post-metadata">

**Author:** ![texnixe](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/texnixe/32/5754_2.png) [@texnixe](https://forum.getkirby.com/u/texnixe)\
**Post date:** [January 14, 2024, 11:16am UTC](https://forum.getkirby.com/t/kirby-tailwind/30494/12 "2024-01-14T11:16:32Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![OPopp](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/opopp/32/14961_2.png) [@OPopp](https://forum.getkirby.com/u/OPopp)\
**Post date:** [January 14, 2024, 11:45am UTC](https://forum.getkirby.com/t/kirby-tailwind/30494/13 "2024-01-14T11:45:56Z")

</div>

Thanks for asking.  
What I got atm

 ![image](https://europe1.discourse-cdn.com/flex017/uploads/getkirby/original/2X/f/f235447b47cee53525dc8c351a624d04754ea3d3.png)

default.php

```auto
<!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

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

module.exports = {

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

```

package.json

```auto
{
    "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"
    }
}

```

---

<div class="post-metadata">

**Author:** ![texnixe](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/texnixe/32/5754_2.png) [@texnixe](https://forum.getkirby.com/u/texnixe)\
**Post date:** [January 14, 2024, 12:06pm UTC](https://forum.getkirby.com/t/kirby-tailwind/30494/14 "2024-01-14T12:06:14Z")

</div>

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

```auto
    "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.

---

<div class="post-metadata">

**Author:** ![OPopp](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/opopp/32/14961_2.png) [@OPopp](https://forum.getkirby.com/u/OPopp)\
**Post date:** [January 14, 2024, 1:27pm UTC](https://forum.getkirby.com/t/kirby-tailwind/30494/15 "2024-01-14T13:27:35Z")

</div>

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”

---

<div class="post-metadata">

**Author:** ![texnixe](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/texnixe/32/5754_2.png) [@texnixe](https://forum.getkirby.com/u/texnixe)\
**Post date:** [January 14, 2024, 1:32pm UTC](https://forum.getkirby.com/t/kirby-tailwind/30494/16 "2024-01-14T13:32:10Z")

</div>

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

 ![Bildschirmfoto 2024-01-14 um 14.31.43](https://europe1.discourse-cdn.com/flex017/uploads/getkirby/original/2X/3/3978535abc44b0aa46eed5e80410270164c87a39.jpeg)

 ![Bildschirmfoto 2024-01-14 um 14.31.12](https://europe1.discourse-cdn.com/flex017/uploads/getkirby/original/2X/7/7820ad834111e97596fe7df60dc13f91c3419ff2.png)

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?

---

<div class="post-metadata">

**Author:** ![OPopp](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/opopp/32/14961_2.png) [@OPopp](https://forum.getkirby.com/u/OPopp)\
**Post date:** [January 14, 2024, 1:43pm UTC](https://forum.getkirby.com/t/kirby-tailwind/30494/17 "2024-01-14T13:43:23Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![SCC](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/scc/32/4116_2.png) [@SCC](https://forum.getkirby.com/u/SCC)\
**Post date:** [January 14, 2024, 8:38pm UTC](https://forum.getkirby.com/t/kirby-tailwind/30494/18 "2024-01-14T20:38:25Z")

</div>

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.