Our great sponsors
-
core
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web. (by vuejs)
-
-
InfluxDB
Power Real-Time Data Analytics at Scale. Get real-time insights from all types of time series data with InfluxDB. Ingest, query, and analyze billions of data points in real-time with unbounded cardinality.
-
-
Google Fonts
Font files available from Google Fonts, and a public issue tracker for all things Google Fonts
This configuration ensures that Tailwind CSS is available in all files that end in html or js. If we were working with a web framework like React or Vue, we would configure the paths so it accepts the jsx and vue file extensions and offers support for Tailwind, but we're fine with the html and js extensions for this project.
By following this Tailwind CSS tutorial, you have learned about Tailwind theming, the logic behind creating light and dark themes, and how to create themes of several colors using Tailwind CSS. It doesn't end here— you can check out the Tailwind CSS documentation or our blog post on replacing complex classes with Tailwind CSS to learn more. Have fun!
This configuration ensures that Tailwind CSS is available in all files that end in html or js. If we were working with a web framework like React or Vue, we would configure the paths so it accepts the jsx and vue file extensions and offers support for Tailwind, but we're fine with the html and js extensions for this project.
Here I've created a simple webpage that displays the use cases of the Pieces for Developers app. For a better UI look, we added the Poppins font from Google Fonts and some Tailwind CSS styling so our elements look nice. Also, we created a Tailwind CSS button that controls the behavior of the themes. When we click on the button, we want to toggle the theme on and off. Here's how the output looks: