Codeigniter 4 w/ Tailwind CSS

Anybody have experience using Tailwind CSS with Codeigniter 4?

I followed the steps to use the Tailwind CLI, but when I run 

Code:

npx tailwindcss -i public/css/input.css -o public/css/output.css --watch;

I get warnings

Code:

warn - No utility classes were detected in your source files. If this is unexpected, double-check the `content` option in your Tailwind CSS configuration.

warn - https://tailwindcss.com/docs/content-configuration

Here is my tailwind.config.js file 

Code:

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

module.exports = {

  content: {

    relative: true,

    files: ["./app/Views/*.php", "./public/*.js"],

  },

  theme: {

  extend: {},

},

plugins: [],

};

I think it's an issue with the content part of the tailwind config file but I can't for the life of me figure out what's wrong.

Hello
hope you solved meanwhile
otherwise, follow this tutorial
https://www.youtube.com/watch?v=YEb6XWt4noA
turn off audio , enable subtitles, change translation to your preferred language (I anyway set it to English)
Subtitles are a nice plus, though the video is self explaining

I think Lonnie has been working with it, he would be the one to ask.

What did you Try? What did you Get? What did you Expect?

Joined CodeIgniter Community 2009.  ( Skype: insitfx )

Hi, I am also experimenting with Tailwind... and running into some other things I am not quite sure how to solve.
@rmartin93 Have you managed to get it working? I did following the CLI install and doing this in my tailwind.config.js:

Code:

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

My input css / output css files are inside /public/css/ and I manage to get a build running the command

Code:

npx tailwindcss -i public/css/input.css -o public/css/output.css --watch;

It works, but i have to run the build every time I make a change and I am trying to get that done automatically. Any suggestion on how to improve this from anyone?

The suggestion here
https://forum.codeigniter.com/showthread...#pid408565

Is to write to this user:
https://forum.codeigniter.com/member.php...ile&uid=90

Which is Lonnie, the chief developer of Codeigniter current version

Please keep present that he may be really busy :-)

Link your post in the private message you would write him ( your post https://forum.codeigniter.com/showthread...#pid410766)

In such a way that he will answer here and all the community may take advantage of the Infos

Also could be that together with HTMX he may consider to add some facilitation to Tailwind implementation in Codeigniter 4.x and following versions

Hi,
I am successfully using Tailwind CSS in my CodeIgniter 4 project. If anyone still searching it, then I followed below steps:
Step 1: In the CodeIgniter project folder, run below commands to install node package and create blank tailwind.config.js

Code:

npm install -D tailwindcss

npx tailwindcss init

Step 2: Update tailwind.config.js as below:

Code:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./app/Views/**/*.php"],
  theme: {
    extend: {},
  },
  plugins: [],
}

Step 3: Create input.css with below code. You can create it anywhere. I created at app > Views > css > input.css

Code:

@tailwind base;
@tailwind components;
@tailwind utilities;

Step 4: On terminal in CodeIgniter project folder, run below command. If you using different path for input.css and output css (mine styles.css) then change path accordingly.

Code:

npx tailwindcss -i ./app/Views/css/input.css -o ./public/assets/css/styles.css --watch

Step 5: Now just include out css file (mine styles.css) in your php files. With Step 4 command, it will keep running, so if you add any tailwind css class in php file, it will automatically add that to output css file.
Hope this helps!

Hi,
I am successfully using Tailwind CSS in my CodeIgniter 4 project. If anyone still searching it, then I followed below steps:
Step 1: In the CodeIgniter project folder, run below commands to install node package and create blank tailwind.config.js

Code:

npm install -D tailwindcss

npx tailwindcss init

Step 2: Update tailwind.config.js as below:

Code:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./app/Views/**/*.php"],
  theme: {
    extend: {},
  },
  plugins: [],
}

Step 3: Create input.css with below code. You can create it anywhere. I created at app > Views > css > input.css

Code:

@tailwind base;
@tailwind components;
@tailwind utilities;

Step 4: On terminal in CodeIgniter project folder, run below command. If you using different path for input.css and output css (mine styles.css) then change path accordingly.

Code:

npx tailwindcss -i ./app/Views/css/input.css -o ./public/assets/css/styles.css --watch

Step 5: Now just include out css file (mine styles.css) in your php files. With Step 4 command, it will keep running, so if you add any tailwind css class in php file, it will automatically add that to output css file.
Hope this helps!

This worked perfectly for me. Thanks.

Hey CodeIgniter community!

I wanted to share a quick and frustration-free way to incorporate Tailwind CSS into your CodeIgniter 4 project using a CDN. If you've ever been frustrated with npm setups, this method is for you!

Step 1: Copying Tailwind CSS from CDN

I understand the frustration that can come with npm setups, so I opted for a simpler approach. I started by visiting the Tailwind CSS CDN link (https://cdn.jsdelivr.net/npm/tailwindcss...nd.min.css) and copied the entire content.

Step 2: Creating a Stylesheet File

Next, I created a new CSS file in my CodeIgniter 4 project, let's call it styles.css, and pasted the copied Tailwind CSS content into it.

Step 3: Linking the Stylesheet in Your Views

In my CodeIgniter 4 views, I added a link to the new stylesheet in the head section of my HTML:

Code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="<?= base_url('path/to/styles.css') ?>">
    <title>Your CodeIgniter 4 Project</title>
</head>
<body>
    <!-- YOU CODE HERE -->
</body>
</html>

Replace 'path/to/styles.css' with the actual path to your styles.css file.

Conclusion

This frustration-free method offers a quick way to get started with Tailwind CSS in CodeIgniter 4 without the need for npm or complex build processes. If npm has ever made you pull your hair out, you're not alone! Give this method a try and let me know if it helps.

This semi-new Components library for CI4 should be really useful with tailwind. It allows to encapsulate html and css classes (Tailwind is famous for the excess of those) into reusable website building blocks.
See it here: https://packagist.org/packages/dgvirtual...components

==

Donatas G.

This semi-new Components library for CI4 should be really useful with tailwind. It allows to encapsulate html and css classes (Tailwind is famous for the excess of those) into reusable website building blocks.
See it here: https://packagist.org/packages/dgvirtual...components

I use Tailwindcss along with WebPack to prune & minify production css to only those parts of the library actually used in the project. The site loads much faster.