does it work with bootstrap 5 framework ?

[giannik]

Hello. I would like to use components in an existing bootstrap 5 project . Since you mention it uses tailwind is there any collision with the bootstrap 5 css framework. will it work seamlessly ?

[ahmadbilaldev]

I don't think there will be any conflicts. Give it a try and let me know if there are any. Your feedback will be very useful.

[giannik]

I think that to be 100% sure we would need to prefix tailwind components so that when building the assets a prefix is added to classes as described here :
https://dev.to/kachkolasa/how-to-use-tailwindcss-bootstrap-in-the-same-project-5ho

do you agree with this approach ? Where in the code assets would i need to make such a change and how would i do a custom build ? I think if you document in the readme how to do a custom build for this use case would be helpful to many to avoid css collisions with existing code.

[ahmadbilaldev]

Yes, you can configure the prefix as stated in the resource in the tailwind config of your project. I don't think you will need to make any other changes. Just paste the component's code into your project and it should work. Do you think we still need a custom build?

[giannik]

forgive my question but is this where you would set the prefix ? :

https://github.com/ahmadbilaldev/langui/blob/main/src/styles/tailwind/components.config.js

module.exports = {
  darkMode: 'class',
   prefix: "tw-",   -- set prefix for tailwind to avoid conflict with other css classes
  content: ['./public/components/**/*.html', './src/data/components/*.mdx'],
  presets: [require('./extend.preset.js')],
}

Then because i want to use css link reference in my project to the css assets i would do a

npm runscript css:components

to build the custom css in folder public/components.css so that i can reference in my project .

Is this correct ?

[ahmadbilaldev]

Ah, so you're trying to customize the components as a whole. Yes, you are right.

• For components, the tailwind config lies in src/styles/tailwind/components.config.js
• For components, the extend preset config lies in src/styles/tailwind/extend.preset.js
• For the LangUI site itself, the config is in src/styles/tailwind/site.config.js

Add the prefix changes to src/styles/tailwind/components.config.js, build the components and you will be good to go.

[giannik]

It doesnt seem to work.

I added in src/styles/tailwind/components.config.js:

/** @type {import('tailwindcss').Config} */
module.exports = {
  darkMode: 'class',
  content: ['./public/components/**/*.html', './src/data/components/*.mdx'],
  prefix: "tw-",
  presets: [require('./extend.preset.js')],
}

then did:

npm install npm run build and git this error :

any help?

[ahmadbilaldev]

Can you share your components.css? Seems like an issue with that file.

[giannik]

It is the file in the original source code here : src/styles/components.css

[ahmadbilaldev]

Try removing this base directive in the file:

@layer base { :where([dir='rtl']) select { @apply bg-[left_0.5rem_center] pe-10 ps-3; } }

[ahmadbilaldev]

Closing due to inactivity.