https://lexingtonthemes.com/tutorials/how-to-create-an-accessible-measurement-display-using-the-meter-tag/

colorsandfonts.com/monochromatic-color-palette-generator/

Learn how to create a skeleton loading screen with tailwind css and javascript with Tailwind CSS.

How to create a skeleton loading screen with Tailwind CSS and Javascript

https://lexingtonthemes.com/tutorials/how-to-create-a-skeleton-loading-screen-with-tailwind-css-and-javascript/

https://lexingtonthemes.com/tutorials/how-to-create-a-basic-drawing-tool-and-save-to-png-with-tailwind-css-and-javascript/

colorsandfonts.com/tailwind-to-postcss-converter/

Learn how to create a password strength meter with tailwind css and javascript with Tailwind CSS.

How to create a password strength meter with Tailwind CSS and JavaScript

https://lexingtonthemes.com/tutorials/how-to-create-a-password-strength-meter-with-tailwind-css-and-javascript/

Learn  how to use the html ruby tag for enhanced text annotations in html with Tailwind CSS.

How to use the HTML ruby tag for enhanced text annotations in HTML

https://lexingtonthemes.com/tutorials/how-to-use-the-html-ruby-element-for-enhanced-text-annotations-in-html/

https://lexingtonthemes.com/tutorials/how-to-create-infinite-scrolling-with-tailwind-css-and-javascript/

Learn how to create a combo box with tailwind css and javascript with Tailwind CSS.

How to create a combo box with Tailwind CSS and Javascript

https://lexingtonthemes.com/tutorials/how-to-create-an-interactive-command-box-with-tailwind-css-and-javascript/

https://lexingtonthemes.com/tutorials/how-to-create-a-password-strength-meter-with-tailwind-css-and-alpinejs/

colorsandfonts.com/design-token-generator/

https://michaelandreuzza.com/work/serendipity

Learn  how to use the html mark tag for highlighting text with Tailwind CSS.

How to use the HTML mark tag for highlighting text

https://lexingtonthemes.com/tutorials/how-to-use-the-html-mark-tag-for-highlighting-text/

https://lexingtonthemes.com/tutorials/how-to-create-persistent-tabs-with-tailwind-css-and-alpinejs/

Free and premium components, elements and layouts For freelancers, developers, businesses, and personal use. Beautifully crafted with Tailwind CSS — Simple & easy to customise.

Oxbow UI - Free & premium components crafted with Tailwind CSS | Product Hunt

Learn  how to use the time tag for displaying time in an accessible way with Tailwind CSS.

How to use the time tag for displaying time in an accessible way

https://lexingtonthemes.com/tutorials/how-to-use-the-time-tag-for-displaying-time-in-an-accessible-way/

Learn how to create a javascript-free animated accordion faq section with only tailwind css with Tailwind CSS.

How to create a JavaScript-Free animated accordion FAQ section with only Tailwind CSS

https://lexingtonthemes.com/tutorials/how-to-create-a-javascript-free-animated-accordion-faq-section-with-only-tailwind-css/

Learn how to use the html output tag for displaying the result of a calculation. with Tailwind CSS.

How to use the HTML output tag for displaying the result of a calculation.

https://lexingtonthemes.com/tutorials/how-to-use-the-output-tag-for-displaying-the-result-of-a-calculation/

https://lexingtonthemes.com/tutorials/how-to-create-persistent-tabs-with-tailwind-css-and-javascript/

Learn how to create interactive and accessible content with the details element with Tailwind CSS.

How to create interactive and accessible content with the details element

https://lexingtonthemes.com/tutorials/how-to-create-interactive-accessible-content-with-details-element/

Learn how to create an image comparison slider with tailwind css and javascript with Tailwind CSS.

How to create an image comparison slider with Tailwind CSS and JavaScript

https://lexingtonthemes.com/tutorials/how-to-create-an-image-comparison-slider-with-tailwind-css-and-javascript/

https://lexingtonthemes.com/tutorials/how-to-use-the-datalist-for-creating-autocomplete-input-fields/

How to create an accessible measurement display using the meter tag

Read the full article, see it live and get the code.
— https://lexingtonthemes.com/tutorials/how-to-create-an-accessible-measurement-display-using-the-meter-tag/

Now you can generate a monochromatic color palette on Colors & fonts.

— colorsandfonts.com/monochromatic-color-palette-generator/

I’ve wrote 90 tutorials on Tailwind CSS, Alpine JS and JavaScript.
Read them all.
— https://lexingtonthemes.com/tutorials/

How to create a skeleton loading screen with Tailwind CSS and Javascript

Read the full article, see it live and get the code!
— https://lexingtonthemes.com/tutorials/how-to-create-a-skeleton-loading-screen-with-tailwind-css-and-javascript/

How to create a basic drawing tool and save to PNG with Tailwind CSS and JavaScript
Read the full article, see it live and get the code:
— https://lexingtonthemes.com/tutorials/how-to-create-a-basic-drawing-tool-and-save-to-png-with-tailwind-css-and-javascript/

I've been experimenting with Tailwind CSS V4 and initially thought translating colors from the tailwind.config.js to PostCSS would be a hassle,  if you have a lot to convert. 

So, I created this small tool to make it easier.
colorsandfonts.com/tailwind-to-postcss-converter/

How to create a password strength meter with Tailwind CSS and JavaScript

Read the article, see it live and get the code!
— https://lexingtonthemes.com/tutorials/how-to-create-a-password-strength-meter-with-tailwind-css-and-javascript/

You can now generate CSS @‌fontface rules on Colors & fonts.

» Choose your folder.
» Add a path if needed.
» Choose the display options.
» Generate your CSS.
» Copy to clipboard.
» Enjoy your productivity.

Try it on: colorsandfonts.com

How to use the HTML ruby element for enhanced text annotations in HTML

Read the article, see it live and get the code.
— https://lexingtonthemes.com/tutorials/how-to-use-the-html-ruby-element-for-enhanced-text-annotations-in-html/

How to create infinite scrolling with Tailwind CSS and JavaScript

Explore the article, see the live demo, and grab the code.

— https://lexingtonthemes.com/tutorials/how-to-create-infinite-scrolling-with-tailwind-css-and-javascript/

How to create a combo box with Tailwind CSS and Javascript
Read the article, see it live and get the code.
— https://lexingtonthemes.com/tutorials/how-to-create-an-interactive-command-box-with-tailwind-css-and-javascript/

How to create a password strength meter with Tailwind CSS and Alpine JS

Read the full article, see it live and get the code.
— https://lexingtonthemes.com/tutorials/how-to-create-a-password-strength-meter-with-tailwind-css-and-alpinejs/

Question for Developers and UX Designers:

Would it make more sense to consolidate the grids with the static features, or should they remain separate for clarity and usability?

Now you create CSS box shadow on Colors and Fonts.
— colorsandfonts. com/box-shadow-generator/

A decade of love, laughter, and adventure with wifey.
— Celebrating 10 years of marriage today!

Introducing —Windstatic
Premium components, elements and layouts.  — Crafted with Tailwind CSS and Alpine JS 
 
» Marketing — 240 components Available.
» Application & eCommerce. Coming soon  
» Early adopter pricing available! 

http://windstatic.com

You can now generate your design tokens and export them as PostCSS, SASS and JSON on Colors & fonts.

You can try it here: 
» colorsandfonts.com/design-token-generator/

And just like that Serendipity theme for VS Code and other interfaces reaches 53K installs.

Grab it » https://michaelandreuzza.com/work/serendipity

How to use the HTML mark tag for highlighting text

Read the article, see it live and get the code.
— https://lexingtonthemes.com/tutorials/how-to-use-the-html-mark-tag-for-highlighting-text/

Trolls on this platform? 
Never seen them before...

How to create persistent tabs with Tailwind CSS and Alpine JS
Read the article, see it live and get the code.
— https://lexingtonthemes.com/tutorials/how-to-create-persistent-tabs-with-tailwind-css-and-alpinejs/

» The new https://windstatic.com/ is live

Oh I saw it when it was first made. Tried reporting it but found out that my mail app broke, so I spent a bunch of time trying to figure that out. By the time I got it fixed the comment was gone, so I guess someone else reported it too

@andy is on-site reporting being worked on?

The number of tools on Colorsandfonts.com is increasing, making the page lengthy. 

What layout do you think works best for websites like this?  — Been considering a sidebar or tabs. Navigation menu it’s starting to feel overwhelming as well.

What’s your take on this?

Oxbow UI ist's live on Product Hunt. 
Any support it's appreciated!
— https://producthunt.com/posts/oxbow-ui

How to use the time tag for displaying time in an accessible way

Read the full article, see it live and get the code
— https://lexingtonthemes.com/tutorials/how-to-use-the-time-tag-for-displaying-time-in-an-accessible-way/

How to create a JavaScript-Free animated accordion FAQ section with only Tailwind CSS

Read the full article, see it live and get the code.
— https://lexingtonthemes.com/tutorials/how-to-create-a-javascript-free-animated-accordion-faq-section-with-only-tailwind-css/

How to use the HTML output tag for displaying the result of a calculation.

Read the full article, see it live and get the code.

— https://lexingtonthemes.com/tutorials/how-to-use-the-output-tag-for-displaying-the-result-of-a-calculation/

New  tool on colors & fonts.
» Local font previewer.
-----
Add your custom text and write the name of any of your local fonts, and it will appear just right there...

No need to open Figma, VS Code or any other tool to have a basic preview.
» colorsandfonts.com/font-previewer/

How to create persistent tabs with Tailwind CSS and JavaScript

Read the article, see it live and get the code.

— https://lexingtonthemes.com/tutorials/how-to-create-persistent-tabs-with-tailwind-css-and-javascript/

How to create interactive and accessible content with the details element

Read the full article, see it live and get the code.
— https://lexingtonthemes.com/tutorials/how-to-create-interactive-accessible-content-with-details-element/

How to create an image comparison slider with Tailwind CSS and JavaScript

Read the full article, see it live and get the code.

— https://lexingtonthemes.com/tutorials/how-to-create-an-image-comparison-slider-with-tailwind-css-and-javascript/

— 10 Fly-out menus Coming soon to Oxbow UI

How to use the HTML <datalist> tag

Read the article, see it live and get the code.
— https://lexingtonthemes.com/tutorials/how-to-use-the-datalist-for-creating-autocomplete-input-fields/

New: Create a color design system on Colorsandfonts.com

» Choose a starting color
» Randomize and select hues, tints, and shades
» Preview scale: Intensity, LAB, lightness, etc.
» Check for color blindness
» Export to PostCSS and SCSS

Posts