HomeНаука и техникаRelated VideosMore From: Andre Madarang

Custom Radio Buttons - Tailwind CSS

67 ratings | 2893 views
Original Tweet by Steve Schoger: https://twitter.com/steveschoger/status/1024720091546562560 We take a look at building custom radio buttons with Tailwind CSS. We begin by styling out the radio buttons in a Vue CLI app. We then make it interactive with Vue.js in the next video. Install Tailwind w/ Vue CLI 3: https://www.youtube.com/watch?v=cnfR4vYJGgY Part 2 using Vue: https://www.youtube.com/watch?v=baLbT7tP--U GitHub repo: https://github.com/drehimself/custom-radio-buttons # LINKS My courses: https://codewithdre.com Sign up for my newsletter: http://andremadarang.com/newsletter My website: http://andremadarang.com Twitter: http://twitter.com/drehimself GitHub: http://github.com/drehimself CodePen: http://codepen.io/drehimself
Html code for embedding videos on your blog
Text Comments (14)
viperfx (3 days ago)
Hey do you have the Refactoring UI book? I would love to get more videos like this where you take a design to a tailwind prototype!
Andre Madarang (2 days ago)
I do! Will definitely be building more UIs when Tailwind 1.0 drops.
Ying Ying (6 months ago)
Hi Andre, Could you do a tutorial about Starpi CMS? I tried it today and love at first sight :D.. it has 3 enviroment stages, relational fields like laravel, JWT auth and many more.. content generator is amazing. pretty much all in one..
Ying Ying (6 months ago)
Thanks Andre, If I am good at Eng like you then I probably did a tutorial :D hahha .. I tried Strapi this morning and deployed to heroku, but I get confused why the content builder isn't in the admin panel. Actually, Strapi is a generator engine to generate API driven CMS at local and when it's deployed, there is no more builder options. As I am a frontend designer, I don't want to think about API and Authentications stuffs for my app, and now I can easily generate with Strapi.. ( P.S. I am not marketing for Strapi at all :P , I'm just an ordinary person who follow your tutorials ) Here is their demo video https://www.youtube.com/watch?v=yMl5IcFHA74
Andre Madarang (6 months ago)
Never heard of this before. Will take a look!
Daniel Wood (6 months ago)
You may want to extract your selections as a child-component (i personally hate large chucks of repeating code...especially when I have to add/update them). Then you can use either v-for on your parent or you can just create as many as needed. Then pass details to the component with props. Love the videos. Keep 'em coming.
Andre Madarang (6 months ago)
For sure! I do exactly that in the Vue video :)
Hey, very nice! Liked it very much. I've got a question: whats the name of the VS Code plugin showing the colors right inside the code? Thx :-)
Alex Oxthorn (6 months ago)
you can get it working in the tailwind config file by setting "colorize.files_extensions": [".js", ".css", ".vue"] (or whatever file extensions you want) in the vscode user settings.
Andre Madarang (6 months ago)
I believe I use Color Highlight: https://marketplace.visualstudio.com/items?itemName=naumovs.color-highlight#overview.
Indent Rainbow is also very nice, but I was looking for the plugin that shows the color of the hex value as background-color - explicit in the tailwind.config.js file, thx :-) I just used "colorize"-Plugin, but I did not get it working in the tailwind-config-file. :-(
Andre Madarang (6 months ago)
Indent Rainbow: https://marketplace.visualstudio.com/items?itemName=oderwat.indent-rainbow. Also check out Bracket Pair Colorizer: https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer
Austin Smith (6 months ago)
Awesome video, keep them up!
Andre Madarang (6 months ago)
Thanks for watching!

Would you like to comment?

Join YouTube for a free account, or sign in if you are already a member.