search

SymfonyCasts / tailwind-bundle

Delightful Tailwind Support for Symfony + AssetMapper
https://symfony.com/bundles/TailwindBundle/current/index.html
MIT License
84 stars 20 forks source link

How can I use third party plugins with this bundle / tailwind.config.js? #36

Closed toby-griffiths closed 10 months ago

toby-griffiths commented 11 months ago

Hello there 👋🏼

Thank you for all the work you've put into this plugin.

I have a question about using 3rd party plugins…. I've been wracking my brain to try to work out how to install the Flowbite plugin using Symfony's importmap:require command… and then I realised that the way I learned to include the tailwindcss/plugin as found in this Symfonycast works even when the project does not have any tailwindcss files in the ./assert/vendor directory, so I have 2 questions…

1 . How does this code work? i.e. where is the plugin file actually found? Is it inside the Tailwind binary, perhaps?…

```
const plugin = require('tailwindcss/plugin');
/** @type {import('tailwindcss').Config} */
module.exports = {
  plugins: [
    plugin(function({ addVariant }) {
      addVariant('turbo-frame', 'turbo-frame[src] &')
    }),
  ],
}
```
  1. How can I install the Flowbite package plugin in a way it can be found by the tailswindcss:build process?

Here's how I've tried it…

  1. Install flowbite… 
    $ symfony console importmap:require flowbite/plugin
  2. Add flowbite to the tailwindcss.config.js file… 
    
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
"./assets/**/*.js",
"./templates/**/*.html.twig",
"./vendor/tales-from-a-dev/flowbite-bundle/templates/**/*.html.twig"
],
theme: {
extend: {},
},
plugins: [
require('flowbite/plugin'),
],
}
3. Attempt to build the tailwind files…

$ symfony console tailwindcss:build


And here's the error I'm getting…

Error: Cannot find module 'flowbite/plugin' Require stack:

toby-griffiths commented 11 months ago

And of course, immediately after I typed that I had another idea… and worked it out.

For anyone finding this and wondering the same thing, simply npm init in the same directory as the tailwind.config.js file, npm install flowbite, and then the TailwindCSS build should find it just dandy.

Do you know if this is likely to be updated to support the 'node/npm-less' approach we can now use with the release of the AssetMapper component?

Inkod commented 11 months ago

Hi @toby-griffiths :wave:

I asked myself exactly the same question about this subject and came across this issue . I've found a solution (similar to yours):

Now, the tailwind build should work ;)

Edit: Finally, it seems break further on deps from the plugin itself (I don't know why it worked for a time, maybe not a fresh build or something else) :/

toby-griffiths commented 10 months ago

Thanks for the additional info @Inkod. Sounds like a better fix might be required somehow.

Inkod commented 10 months ago

I tried multiples hack to find a way without to have to install package via npm but without success.. It helped me understand the whole system a little better.

In the case of a tailwind plugin that has no dependencies on other packages (except the tailwind packages themselves), there will be no problem using a path to the packages installed via AssetMapper. However, if the plugin has an another deps like flowbite with mini-svg-data-uri, tailwind build will try to found it in node_modules, but inevitably, there aren't any.

Inkod commented 10 months ago

Anyway, I think Tailwind is build to work with node to resolve child deps from plugins package, and so, it needs to have a package.json for each packages..

As a result, I don't know if there's much point in using the "AssetMapper" component if you want to be able to make full use of tailwind and the related plugins. WebpackEncore might seem more appropriate for the moment to avoid having to maintain both a list of packages via importmap and via npm.

weaverryan commented 10 months ago

Hey!

Tailwind is a pure Node package, so if it has any deps, those should be installed with npm. We now have a section that talks about this - https://symfony.com/bundles/TailwindBundle/current/index.html#tailwind-plugins - we also cover Flowbite specifically at the end of our latest tutorial - https://symfonycasts.com/screencast/last-stack/flowbite

Cheers!

featuriz commented 7 months ago

If I use symfony assert mapper, its not working. I tried the following both not working, after installing,

First, I installed by following Symfony and Tailwind CSS starter project

symfony console import:require flowbite and symfony console import:require flowbite/plugin

plugins: [
    require('@tailwindcss/typography'),
    require('./assets/vendor/flowbite/plugin')
  ],

and

plugins: [
    require('@tailwindcss/typography'),
    require('flowbite/plugin')
  ],
goodmainelder commented 6 months ago

@featuriz That Symfony/Tailwind CSS starter project uses Webpack Encore (https://github.com/themesberg/tailwind-symfony-starter/blob/main/composer.json#L42) and not AssetMapper Component.

This could be the culprit of your issue.

barbieswimcrew commented 5 months ago

I tried using the "tailwindcss-debug-screens" plugin and it worked for me! Just installed it via asset mapper like so:

php bin/console importmap:require tailwindcss-debug-screens

After installing I added the following line to the tailwind.config.js:

plugins: [
    require('./assets/vendor/tailwindcss-debug-screens/tailwindcss-debug-screens.index'),
]
SparkyRih commented 1 month ago

I wanted to give the AssetMapper a try in a brand new project, but I can't get it to work with flowbite/plugin, tried everything mentioned here including a couple more things.