Tailwind Elements tutorial - Tailwind CSS components library
HTML-код
- Опубликовано: 13 июн 2024
- ⚠️ This tutorial is now outdated. ⚠️
I'd like to redirect you to our up-to-date written tutorials, which you can find here:
🎓 tailwind-elements.com/learn/t...
They have all the latest information and should help you get the most out of our content.
We're working hard to bring you updated video tutorials soon! So make sure you stay subscribed to the channel and hit that notification bell 🔔 to be the first to know when we release the new and improved videos.
------
Tailwind Elements - Bootstrap components recreated with Tailwind CSS, but with better design and more functionalities.
📥 Learn more and download - tailwind-elements.com/
If you are looking for components such as Tailwind Carousel, Tailwind Tooltip, Tailwind Datepicker, and other predefined elements - the free Tailwind Elements library will be perfect for you.
✨ Tailwind playground (online editor) - tailwind-elements.com/snippets/
📤 FREE hosting - mdbgo.com/
🎥 MDB GO / CLI - installation & tutorial • MDBGO - CLI - Install
0:00 Intro
0:57 Tailwind CSS
2:10 What's wrong with TailwindCSS
3:19 Tailwind Elements
3:30 Dynamic components
5:05 Design Blocks
5:30 Tailwind Playground
7:10 Qucik start - CDN
8:55 Quick start - NPM
14:40 Free hosting
#tailwindcss#tutorial#tailwindElements
This tutorial is now outdated.
I'd like to redirect you to our up-to-date written tutorials, which you can find here:
🎓 tailwind-elements.com/learn/te-foundations/basics/introduction/
They have all the latest information and should help you get the most out of our content.
We're working hard to bring you updated video tutorials soon! So make sure you stay subscribed to the channel and hit that notification bell 🔔 to be the first to know when we release the new and improved videos.
I'm looking forward to the updated video.
Thank you so much! You made my day worth it. Looking forward to more videos and updates in the library.
I was very close starting to use Mantine for new projects. Now I'm seriously thinking about Tailwind Elements as an alternative. Rich UI frameworks are rare and this one looks amazing ❤
Now this is overkilling bootstrap
This is great work. We got a video for setting up in VueJS
which color theme do you use? that's really awesome
your tutorial works for me, cdn and npm approach. After that I go to official documentation so I can use tailwind element with reactjs + vite. The moment I copied the code of carousel from documentation and make it as react component, it just display the image but the slide function does not working. But if I move the carousel copied code to index.html, it works. I request you create another tutorial how to use tailwind elements using different approach like when we use reactjs + vite, nextjs, or other framework.
I would love to use parts of it for some projects, but It's so big (255kb). Is there a possibility to use just a carousel, or just the accordion?
How to install this in Nextjs and also how to setup?
A little sugestion - when recording your screen either scale things up or reduce your screen resolution. It will make things easier to read for your audience.
how to control the method functionality in the api. ex: opening and closing modal via vue or javascript native
Can we import seperate module instead whole library? I found this library is quite large.
Is there any info on how to use this library within a blazor wasm project?
really great project!!!
somehow i just cant get the carousel working. the slides are "sliding" but its not seemless (only the slide-exit animation is working) and the labels are missing completely. any idea on how to get that running? im on angular 13
i can see the labels now, was a browser zoom issue.. but the animation issue still persists.
fixed it! in angular.json u'll have to extend styles and scripts attribute:
"styles": [
"src/styles.scss",
"node_modules/tw-elements/dist/src/scss/index.scss"
],
"scripts": [
"node_modules/tw-elements/dist/js/index.min.js"
]
The javascript file is way too large for a production project.. minified is 273kb. Is there a way to reduce this size?
Wonderful! Thanks for your effort. Can we use it in Next.js?
Sure! Exactly the same way as you would be using normal TailwindCSS
when I use tailwind utilities some components don't work. after removing tailwind utilities it works well. how to solve this problem.?
Hello you have a problem in all your javascript in the website even if with the library inside.
When i click in "show code" all component automaticly hide !
when i install tw-elements in my project same problem appear ... all component automaticly hide when we click it ( navbar / and other )
Can you see whats is the problem thanks you !
Is there any way to remove unused js components
Can you guys please add theming options like DaisyUI, please?
I was planning to create personal library using tailwind then I saw this, is it okay if I create personal component library on top of this?
Can any one tell me how I can use tw-elements in nextJs13. As I am adding Js file it shows error.
Not able to use with nextjs accordions and modal, functionality is not working, unable to open a model or accordion
how to use this in vue laravel project?
When I install and configure Tailwind Elements the font of my and changes, how can I fix this?
Please check our support group facebook.com/groups/682245759188413
A great library, but its weight of 266 kb is almost 2 times more than in Bootstrap, is it possible to somehow select only the necessary components in order to reduce the weight? I only need two components?
Like with the normal Tailwind tailwindcss.com/docs/optimizing-for-production
I have the same concern... where does the JS code go after postcss ?
Next lecture which time come
how to install in nextjs?
Can I use it with NextJs?
Sure, you can use it as you would be using pure tailwindCSS
How to customize the colors or theme?
You can customize exactly the same way as you would do it with standard TailwindCSS tailwindcss.com/docs/theme
Does mdb support remix applications?
Could you please rephrase your question please? What do you mean by remix?
@@Mdbootstrap applications written with remix.run a react framework? Can mdb host such?
@@fabischkamau Yes, as long as you follow the proper steps to build your Remix application (provided in the remix docs) you should be able to host your app on MDB GO. We don't provide documentation for this specific framework but the steps are similar to any other react app
Do you have any tutorial on purpose to install tw-elements in Angular? I haven't been able to get it to work in Angular using npm. I've only managed to get tw-elements working using CDN, but the datepicker doesn't work.
Not yet but stay tuned! We will add some in the future.
I "love" how so much of this stuff changes so quickly that a demo 1 year old doesn't match how it says to use a tailwind element now and therefore doesn't work.
/node_modules/tw-elements/dis/js/index.min.js no such file any more. There are other .js files in that directory but not that one.
How do I add this in my react project that uses tailwind?
Technically same way as you would add normal tailwind to the project
@@Mdbootstrap I'm having problem with Datepicker component in my react project, is not showing modal when i presss the button, any idea or suggestion? 🥺
@@alandiazyanez3915 , hello, did you fix it, I'm currently having the same issue
@@afolasope I fix it by removing tw-elements from the project and implementing the component by my self :c, send me and email if you want me to share the code;)
followed all steps but not working
Let me move this conversation to the forum, please create a ticket here:
mdbootstrap.com/support/
It's much easier to solve issues there instead of the YT comment section.
You can specify your device, browser, OS and above all, you can add a code snippet if you need.
Me or one of my colleagues will do our best to help you out.
PS. If your ticket refers to a video, please add the timestamp of the point where the problem occurred