Dnn_Tailwind is a powerful theme development platform that allows you to create robust and responsive DNN website themes, all while writing very little CSS. It achieves this by leveraging the power of the Tailwind CSS framework. It is based on nvQuickTheme by nvisionative, but the CSS framework has been ported over from Bootstrap, to Tailwind CSS.
Why DNN_Tailwind Was Created
Most CSS frameworks have many components like buttons, cards, alerts, etc., pre-styled for your convenience. We call these types of frameworks “Opinionated”. This makes creating websites fast and easy, but the drawback is that many sites look the same. If you want to customize the look of these components, you must struggle with overrides or awkward workarounds to get your styles to work.
Tailwind CSS on the other hand is “Non-Opinionated”. The creators have gone to great lengths to remove any, and all styling, even the default styling imposed by browsers. You use Tailwind’s low-level utility classes to build your completely custom and beautiful designs all within your HTML. There is generally very little need to write any custom CSS. To quote Tailwind’s website:
“If you’re sick of fighting the framework, overriding unwanted styles, and battling specificity wars, Tailwind was made for you.”
In addition, most DNN themes in the marketplace today are loaded with bloat, which can make theming a pain, and for someone new to DNN, almost impossible. This bloat also vastly decreases your DNN site’s performance while increasing page load times.
We created DNN_Tailwind to simplify the task of creating beautiful DNN themes that are lightweight, fast, and responsive. As a DNN theme developer, who wouldn’t like that?
Performance
Using the default theme included with the framework, we were able to get page load scores of 99 for Desktop, and 90 for Mobile, using Google’s PageSpeed Insights. For a DNN website, that’s fast perfromance!*
|
 |
| Desktop Insights | Mobile Insights |
Documentation
Our documentation outlines basic usage, modification, and advanced usage of this framework and developer workflow. If you are familiar with Tailwind, you’re in the right place. If not, please take a few minutes to get acquainted with Tailwind CSS at https://tailwindcss.com, then come on back and roll up your sleeves!
* Page load speeds may vary based upon your site’s complexity and content.