CINXE.COM

<!doctype html> <html lang="en"> <head> <link rel="canonical" href="https://themesberg.com/knowledge-center/tailwind-css/html"> <title>How to add Tailwind CSS to HTML? - Themesberg</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <meta name="description" content="Learn how to quickly add Tailwind CSS to your HTML using CDN or learn the advanced method of using a package manager and PostCSS and use the Tailwind configuration file to your advantage."> <meta name="author" content="Themesberg"> <meta name="csrf-token" content="BPatqm9X6iPpZ90IlKArl6KVF48CnBXbJzfN0N5y"> <meta name="image" content="https://themesberg.s3.us-east-2.amazonaws.com/public/knowledge-center/tailwind-css/tailwind-css-html.jpg"> <meta itemprop="name" content="How to add Tailwind CSS to HTML?"> <meta itemprop="description" content="Learn how to quickly add Tailwind CSS to your HTML using CDN or learn the advanced method of using a package manager and PostCSS and use the Tailwind configuration file to your advantage."> <meta itemprop="image" content="https://themesberg.s3.us-east-2.amazonaws.com/public/knowledge-center/tailwind-css/tailwind-css-html.jpg"> <meta name="twitter:card" content="summary"> <meta name="twitter:title" content="How to add Tailwind CSS to HTML?"> <meta name="twitter:description" content="Learn how to quickly add Tailwind CSS to your HTML using CDN or learn the advanced method of using a package manager and PostCSS and use the Tailwind configuration file to your advantage."> <meta name="twitter:site" content="@themesberg"> <meta name="twitter:creator" content="@themesberg"> <meta name="twitter:image:src" content="https://themesberg.s3.us-east-2.amazonaws.com/public/knowledge-center/tailwind-css/tailwind-css-html.jpg"> <meta name="og:title" content="How to add Tailwind CSS to HTML?"> <meta name="og:description" content="Learn how to quickly add Tailwind CSS to your HTML using CDN or learn the advanced method of using a package manager and PostCSS and use the Tailwind configuration file to your advantage."> <meta name="og:url" content="https://themesberg.com/knowledge-center/tailwind-css/html"> <meta name="og:image" content="https://themesberg.s3.us-east-2.amazonaws.com/public/knowledge-center/tailwind-css/tailwind-css-html.jpg"> <meta name="og:site_name" content="Themesberg"> <meta name="fb:admins" content="214738555737136"> <meta name="og:type" content="website"> <link rel="apple-touch-icon" sizes="180x180" href="https://themesberg.com/apple-touch-icon.png"> <link rel="icon" type="image/png" sizes="32x32" href="https://themesberg.com/favicon-32x32.png"> <link rel="icon" type="image/png" sizes="16x16" href="https://themesberg.com/favicon-16x16.png"> <link rel="manifest" href="https://themesberg.com/site.webmanifest"> <link rel="mask-icon" href="https://themesberg.com/safari-pinned-tab.svg" color="#ff7f66"> <meta name="msapplication-TileColor" content="#ffffff"> <meta name="theme-color" content="#ffffff"> <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,600,700&display=swap" rel="stylesheet"> <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.15.4/css/all.css" integrity="sha384-rqn26AG5Pj86AF4SO72RK5fyefcQ/x32DNQfChxWvbXIyXFePlEktwD18fEz+kQU" crossorigin="anonymous"> <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/cookieconsent@3/build/cookieconsent.min.css" /> <link type="text/css" href="https://themesberg.com/css/themesberg.css" rel="stylesheet"> <script src="https://cdn.usefathom.com/script.js" data-site="ZLGNUJDJ" defer></script> </head> <body> <div id="fb-root"></div> <script>(function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = "https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v3.0"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk'));</script> <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-THQTXJ7" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript> <header> <nav class="navbar navbar-main navbar-expand-lg navbar-light bg-soft navbar-light " > <div class="container"> <a class="navbar-brand mr-lg-4" href="https://themesberg.com"> <div class="d-flex align-items-center"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 54 64"><defs><style>.class-1{fill:#ff7f66;}.class-2,.class-4{fill:#2a344f;}.class-2{opacity:0.32;isolation:isolate;}.class-3{opacity:0.16;}</style></defs><title>logo</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><g id="Group_16" data-name="Group 16"><g id="Group_15" data-name="Group 15"><g id="Group_12" data-name="Group 12"><path id="Path_35" data-name="Path 35" class="class-1" d="M53.52,1.87l-22,5.39a1.61,1.61,0,0,1-1.23-.21L19.89.25a1.57,1.57,0,0,0-1.3-.19l-18,5.3A.77.77,0,0,0,0,6.09V16.87L18.59,11.4a1.57,1.57,0,0,1,1.3.19l10.4,6.79a1.53,1.53,0,0,0,1.23.21L54,13.09V2.23a.39.39,0,0,0-.39-.38Z"/><path id="Path_36" data-name="Path 36" class="class-1" d="M40.25,27.84l-8.73,2.1a1.57,1.57,0,0,1-1.23-.21l-10.4-6.8a.37.37,0,0,0-.53.11.31.31,0,0,0-.07.2V33.47a.75.75,0,0,0,.34.63l10.66,7a1.57,1.57,0,0,0,1.23.2l9.23-2.21A6.86,6.86,0,0,0,46,32.45v-.21a4.62,4.62,0,0,0-4.68-4.55A4.93,4.93,0,0,0,40.25,27.84Z"/><path id="Path_37" data-name="Path 37" class="class-1" d="M40.25,50.52l-8.73,2.1a1.61,1.61,0,0,1-1.23-.21l-10.4-6.8a.38.38,0,0,0-.53.1.35.35,0,0,0-.07.21V56.15a.75.75,0,0,0,.34.63l10.66,7a1.53,1.53,0,0,0,1.23.21l9.23-2.22A6.84,6.84,0,0,0,46,55.13v-.21a4.62,4.62,0,0,0-4.68-4.55A4.39,4.39,0,0,0,40.25,50.52Z"/></g><path id="Path_38" data-name="Path 38" class="class-2" d="M30.86,41.29V30a1.63,1.63,0,0,0,.66,0L35.28,29l2.2,10.8-6,1.46A1.47,1.47,0,0,1,30.86,41.29Zm8.82,9.33-8.16,2a1.63,1.63,0,0,1-.66,0V64a1.63,1.63,0,0,0,.66,0l10.36-2.54Zm-8.82-32a1.63,1.63,0,0,0,.66,0l1.57-.38L30.86,7.28Z"/><g id="Group_13" data-name="Group 13" class="class-3"><path id="Path_39" data-name="Path 39" class="class-4" d="M19.29,11.36a1.82,1.82,0,0,1,.6.23l10.4,6.8a1.41,1.41,0,0,0,.57.22V7.27a1.41,1.41,0,0,1-.57-.22L19.89.25a1.82,1.82,0,0,0-.6-.23Z"/><path id="Path_40" data-name="Path 40" class="class-4" d="M30.86,52.64a1.67,1.67,0,0,1-.57-.23l-10.4-6.8a.39.39,0,0,0-.54.11.36.36,0,0,0-.06.2V56.15a.75.75,0,0,0,.34.63l10.66,7a1.73,1.73,0,0,0,.57.22Z"/><path id="Path_41" data-name="Path 41" class="class-4" d="M19.89,22.93a.39.39,0,0,0-.54.11.36.36,0,0,0-.06.2V33.47a.75.75,0,0,0,.34.63l10.66,7a1.58,1.58,0,0,0,.57.22V30a1.43,1.43,0,0,1-.57-.23Z"/></g></g></g></g></g></svg> <p class="ml-2 mb-0 logo-text ">Themesberg</p> </div> </a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse pt-3 pt-lg-0" id="navbarSupportedContent"> <ul class="navbar-nav mr-auto"> <li class="nav-item"> <a href="https://themesberg.com/themes" class="nav-link">Themes</a> </li> <li class="nav-item"> <a href="https://themesberg.com/blog" class="nav-link">Blog</a> </li> <li class="nav-item"> <a href="https://themesberg.com/contact" class="nav-link">Contact</a> </li> </ul> <div class="d-flex align-items-center"> <div class="d-flex align-items-center"> <a href="https://themesberg.com/login" class="btn btn-sm btn-outline-primary mt-2 mt-lg-0" data-toggle="tooltip" data-placement="bottom" title="Join 89525 developers to access Free Themes"> <i class="fad fa-sign-in-alt mr-2"></i>Login/Register </a> </div> </div> </div> </div> </nav> </header> <main> <article> <section class="section-header pt-5 bg-soft pb-9 pb-lg-12 mb-4 mb-lg-6"> <div class="container"> <div class="row"> <div class="col-12 col-lg-8 text-left"> <nav aria-label="breadcrumb"> <ol class="breadcrumb breadcrumb-gray breadcrumb-knowledge-center text-dark breadcrumb-transparent mb-3"> <li class="breadcrumb-item"><a href="https://themesberg.com/knowledge-center"><i class="fad fa-graduation-cap mr-1 text-dark"></i> Knowledge Center</a></li> <li class="breadcrumb-item "><a href="https://themesberg.com/knowledge-center/tailwind-css">Tailwind CSS</a></li> <li class="breadcrumb-item active" aria-current="page">How to add Tailwind CSS to HTML?</li> </ol> </nav> <h1 class="display-2 mb-4 mt-0">How to add Tailwind CSS to HTML?</h1> <div class="d-flex align-items-center"> <div><a href="https://themesberg.com/knowledge-center/tailwind-css" class="badge badge-purple badge-pill" style="background-color: #12B4C5"><span class=""></span> Tailwind CSS </a></div> <span class="ml-4 font-weight-normal text-sm"><span class="fad fa-calendar-day"></span><span class="ml-2">Posted <time class="font-xsmall" pubdate datetime="Oct 22 2020">4 years ago</time></span></span> </div> </div> <div class="col-lg-4"> <div class="card mt-4 p-3 p-lg-0 pt-4 pt-md-3 mb-0 collapse show bg-soft d-none d-lg-flex align-items-center" id="carbon-ad"> <script async type="text/javascript" src="//cdn.carbonads.com/carbon.js?serve=CEBDT237&placement=themesbergcom" id="_carbonads_js"></script> <a href="#navbar" class="fas fa-times close-icon d-md-none" data-toggle="collapse" role="button" data-target="#carbon-ad" aria-controls="carbon-ad" aria-expanded="true" aria-label="Toggle ad"></a> </div> </div> </div> </div> </section> <section class="section section-lg pt-0"> <div class="container mt-n8 mt-lg-n12 z-2"> <div class="row justify-content-center"> <div class="col-12"> <div class="shadow-sm border-light bg-white p-4 p-lg-6"> <p>Adding Tailwind CSS to HTML can be done using more methods, such as using a <abbr title="Content Delivery Network">CDN</abbr>, or the recommended method by getting Tailwind via a package manager and using PostCSS to process the configuration file.</p> <h2 id="step1">Include Tailwind CSS via CDN</h2> <p>If you want to quickly get started using Tailwind CSS and play around with the utility-first classes, just include the following CDN link inside the <code class="text-primary"><head></code> tag of your <abbr title="Hypertext Markup Language">HTML</abbr> template:</p> <pre class="bg-soft language-html"> <code class="language-html"> <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet"> </code> </pre> <p>After you’ve done that, you should be able to use the classes from Tailwind CSS. Check out our latest <a href="https://themesberg.com/blog/tailwind-css/tutorial" target="_blank">Tailwind CSS tutorial</a> where we show you can build a responsive navigation bar and hero section with a sign up form using the utility-first classes from Tailwind CSS.</p> <h2 id="step2">Install Tailwind CSS via NPM and process the configuration file using PostCSS</h2> <p>Although it requires a bit more setup and it requires further knowledge of the terminal and JavaScript, it is most definitely the best way to make use of all of the features that Tailwind CSS can provide.</p> <p>First of all, you need to make sure that you have <a href="https://nodejs.org/en/" target="_blank">Node</a> and NPM installed on your machine. If you do, run the following command in the root directory of your project to initialize the NPM configuration file:</p> <pre class="bg-soft language-bash"> <code class="language-bash"> npm init </code> </pre> <p>You will be asked some questions regarding the project title, description, versioning and so on. The <code class="text-primary">package.json</code> file will mostly hold information about your project and the dependencies that you need, such as Tailwind CSS.</p> <p>Afterward, install Tailwind CSS using the following command:</p> <pre class="bg-soft language-bash"> <code class="language-bash"> npm install tailwindcss --save </code> </pre> <p>This will add Tailwind CSS as a project dependency, and also install the library files inside the node_modules folder. The <code class="text-primary">--save</code> tag ensures that the library is added to the <code class="text-primary">package.json</code> file.</p> <h3>Create a CSS file and include the Tailwind CSS directives</h3> <p>Now that you have Tailwind CSS installed locally, create a <code class="text-primary">main.css</code> file and add the following code to inject the Tailwind CSS code:</p> <pre class="bg-soft language-css"> <code class="language-css"> @tailwind base; @tailwind components; @tailwind utilities; </code> </pre> <p>These directives will be swapped by the actual Tailwind CSS classes when using PostCSS later in this guide.</p> <h3>Setup the Tailwind configuration file</h3> <p>This is an important step to set up a configuration file for Tailwind CSS so that you can later easily customize the classes by modifying and adding new colors, fonts, sizings, shadows and so on.</p> <p>This is a huge advantage compared to using only the CDN of the framework, because using the configuration file you can actually change the framework based on your needs, whereas if you only use the CDN you would need to write extra classes, overriding the default Tailwind CSS classes.</p> <p>Run the following command in your terminal to generate a <code class="text-primary">tailwind.config.js</code> file:</p> <pre class="bg-soft language-bash"> <code class="language-bash"> npx tailwindcss init </code> </pre> <p>By running this command, a new configuration file called <code class="text-primary">tailwind.config.js</code> will be generated with the following code:</p> <pre class="bg-soft language-javascript"> <code class="language-javascript"> // tailwind.config.js module.exports = { future: {}, purge: [], theme: { extend: {}, }, variants: {}, plugins: [], } </code> </pre> <h3>Processing Tailwind CSS</h3> <p>The last step to include Tailwind CSS into HTML using the recommended PostCSS method is to add the following to plugins inside the configuration file and then run the command that will process your configuration file and the main.css file:</p> <pre class="bg-soft language-javascript"> <code class="language-javascript"> module.exports = { plugins: [ // ... require('tailwindcss'), require('autoprefixer'), // ... ] } </code> </pre> <p>And run the following command in your terminal to process your files:</p> <pre class="bg-soft language-bash"> <code class="language-bash"> npx tailwindcss build main.css -o output.css </code> </pre> <p>This will generate a new CSS file called output.css which you need to include in your HTML file. All you need to do now is to add the following code in your HTML template:</p> <pre class="bg-soft language-html"> <code class="language-html"> <link href=”./output.css” rel=”stylesheet”> </code> </pre> <p>Congratulations! Now you should have Tailwind CSS included in your HTML using the recommended method. If you want to learn more about how to use Tailwind CSS you can read our latest <a href="https://themesberg.com/blog/tailwind-css/tutorial" target="_blank">Tailwind CSS tutorial</a> where we cover many aspects of the framework.</p> <footer class="row border-top pt-5 mt-5"> <aside class="col-12 pb-5 mb-5"> <div id="disqus_thread"></div> <script> var disqus_config = function () { this.page.url = "https://themesberg.com/knowledge-center/tailwind-css/html"; this.page.identifier = "knowledge-center/tailwind-css/html"; }; (function() { var d = document, s = d.createElement('script'); s.src = 'https://https-themesberg-com.disqus.com/embed.js'; s.setAttribute('data-timestamp', +new Date()); (d.head || d.body).appendChild(s); })(); </script> <noscript>Please enable JavaScript to view the <a href="https://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript> </aside> <aside class="col-12 col-md-4 mb-4 mb-lg-0"> <div class="mb-4"> <h3 class="h5 font-weight-medium">Related Questions</h3> </div> <ul class="list-unstyled knowledge-center-related-list mb-0"> <li class="pb-1"> <a class="text-gray" href="https://themesberg.com/knowledge-center/tailwind-css/reduce-file-size">How to reduce the file size of Tailwind CSS using PurgeCSS?</a> </li> <li class="pb-1"> <a class="text-gray" href="https://themesberg.com/knowledge-center/tailwind-css/how-to-use-tailwind-css">How to use Tailwind CSS?</a> </li> <li class="pb-1"> <a class="text-gray" href="https://themesberg.com/knowledge-center/tailwind-css/what-is-tailwind-css">What is Tailwind CSS?</a> </li> </ul> </aside> <aside class="col-12 col-md-4 mb-4 mb-lg-0"> <div class="mb-4"> <h3 class="h5 font-weight-medium">Latest News</h3> </div> <ul class="list-unstyled knowledge-center-related-list mb-0"> <li class="pb-1"> <a class="text-gray" href="https://themesberg.com/blog/wordpress/gutenberg-tutorial">WordPress Gutenberg Tutorial - Learn how to get started with custom blocks using the Bergify theme</a> </li> <li class="pb-1"> <a class="text-gray" href="https://themesberg.com/blog/deals/black-friday-2021">Black Friday 2021 - Top 10 Software Deals for Web Developers and Designer</a> </li> </ul> </aside> <aside class="col-12 col-md-4 mb-4 mb-lg-0"> <div class="mb-4"> <h3 class="h5 font-weight-medium">Join us</h3> </div> <p class="font-medium mb-3">Get access to free templates and themes used by over 89525 web developers.</p> <a class="btn btn-sm btn-outline-primary d-none d-sm-inline" href="https://themesberg.com/register"> Create account <span class="fas fa-long-arrow-alt-right ml-2"></span> </a> </aside> </footer> </div> </div> </div> <aside class="row mt-6"> <div class="col-12"> <h3 class="h5 font-weight-medium mb-4">Bootstrap Themes & Templates</h3> </div> <div class="col-12 col-md-6 col-lg-4 mb-5"> <div class="product-card show-info card shadow-sm border-soft" data-product-color="#803C68"> <div class="card border-0 bg-transparent"> <figure class="m-0"> <a href="https://themesberg.com/product/ui-kit/pixel-pro-premium-bootstrap-5-ui-kit"> <img data-src="https://themesberg.s3.us-east-2.amazonaws.com/public/products/pixel-pro/pixel-pro-thumb.jpg" class="lazy" alt="Pixel Pro - Premium Bootstrap 5 UI KIT Preview"> </a> <figcaption class="show-on-hover"> <a href="https://themesberg.com/product/ui-kit/pixel-pro-premium-bootstrap-5-ui-kit" class="btn btn-icon-only rounded-circle btn-product-action mr-3" data-toggle="tooltip" data-placement="bottom" title="Theme details"> <span class="btn-inner-icon"><i class="fad fa-list"></i></span> </a> <a href="https://demo.themesberg.com/pixel-pro/v5/" target="_blank" class="btn btn-icon-only rounded-circle btn-product-action" data-toggle="tooltip" data-placement="bottom" title="Live preview"> <span class="btn-inner-icon"><i class="fad fa-laptop"></i></span> </a> </figcaption> </figure> <div class="card-body p-3"> <div class="post-meta pt-2 d-flex align-items-center justify-content-between"> <div> <a href="https://themesberg.com/product/ui-kit/pixel-pro-premium-bootstrap-5-ui-kit" class="mb-2 d-block mt-0 h5 text-dark">Pixel Pro UI Kit</a> <p class="font-weight-light text-gray small m-0">Premium Bootstrap 5 UI Kit with user dashboard</p> </div> </div> <hr class="bg-soft"> <div class="d-flex align-items-center justify-content-between"> <div> <a href="https://themesberg.com/product/ui-kit/pixel-pro-premium-bootstrap-5-ui-kit" class="product-price text-dark">$89</a> </div> <div class="product-counters d-flex"> <a href="https://themesberg.com/product/ui-kit/pixel-pro-premium-bootstrap-5-ui-kit" class="product-card-downloads font-small text-gray-700"> <i class="fad fa-cart-arrow-down mr-1"></i> 417 </a> <a href="https://themesberg.com/product/ui-kit/pixel-pro-premium-bootstrap-5-ui-kit#reviews" class="product-card-downloads font-small text-gray-700 ml-3"> <i class="far fa-star mr-1"></i> 5.0/5 </a> </div> </div> </div> </div> </div> </div> <div class="col-12 col-md-6 col-lg-4 mb-5"> <div class="product-card show-info card shadow-sm border-soft" data-product-color="#ffa031"> <div class="card border-0 bg-transparent"> <figure class="m-0"> <a href="https://themesberg.com/product/admin-dashboard/volt-bootstrap-5-dashboard"> <img data-src="https://themesberg.s3.us-east-2.amazonaws.com/public/products/volt-bootstrap-5-dashboard/volt-bootstrap-5-dashboard-preview.jpg" class="lazy" alt="Volt - Bootstrap 5 Dashboard Template Preview"> </a> <figcaption class="show-on-hover"> <a href="https://themesberg.com/product/admin-dashboard/volt-bootstrap-5-dashboard" class="btn btn-icon-only rounded-circle btn-product-action mr-3" data-toggle="tooltip" data-placement="bottom" title="Theme details"> <span class="btn-inner-icon"><i class="fad fa-list"></i></span> </a> <a href="https://demo.themesberg.com/volt/" target="_blank" class="btn btn-icon-only rounded-circle btn-product-action" data-toggle="tooltip" data-placement="bottom" title="Live preview"> <span class="btn-inner-icon"><i class="fad fa-laptop"></i></span> </a> </figcaption> </figure> <div class="card-body p-3"> <div class="post-meta pt-2 d-flex align-items-center justify-content-between"> <div> <a href="https://themesberg.com/product/admin-dashboard/volt-bootstrap-5-dashboard" class="mb-2 d-block mt-0 h5 text-dark">Volt Bootstrap 5 Dashboard</a> <p class="font-weight-light text-gray small m-0">Free and open source Bootstrap 5 Admin Template</p> </div> </div> <hr class="bg-soft"> <div class="d-flex align-items-center justify-content-between"> <div> <a href="https://themesberg.com/product/admin-dashboard/volt-bootstrap-5-dashboard" class="product-price text-dark">Free</a> </div> <div class="product-counters d-flex"> <a href="https://themesberg.com/product/admin-dashboard/volt-bootstrap-5-dashboard" class="product-card-downloads font-small text-gray-700"> <i class="fad fa-download mr-1"></i> 16255 </a> <a href="https://themesberg.com/product/admin-dashboard/volt-bootstrap-5-dashboard#reviews" class="product-card-downloads font-small text-gray-700 ml-3"> <i class="far fa-star mr-1"></i> 4.8/5 </a> </div> </div> </div> </div> </div> </div> <div class="col-12 col-md-6 col-lg-4 mb-5"> <div class="product-card show-info card shadow-sm border-soft" data-product-color="#31354B"> <div class="card border-0 bg-transparent"> <figure class="m-0"> <a href="https://themesberg.com/product/ui-kit/neumorphism-ui-kit-bootstrap"> <img data-src="https://themesberg.s3.us-east-2.amazonaws.com/public/products/neumorphism-ui/neumorphism-ui-thumb.jpg" class="lazy" alt="Neumorphism UI Bootstrap Preview"> </a> <figcaption class="show-on-hover"> <a href="https://themesberg.com/product/ui-kit/neumorphism-ui-kit-bootstrap" class="btn btn-icon-only rounded-circle btn-product-action mr-3" data-toggle="tooltip" data-placement="bottom" title="Theme details"> <span class="btn-inner-icon"><i class="fad fa-list"></i></span> </a> <a href="https://demo.themesberg.com/neumorphism-ui/" target="_blank" class="btn btn-icon-only rounded-circle btn-product-action" data-toggle="tooltip" data-placement="bottom" title="Live preview"> <span class="btn-inner-icon"><i class="fad fa-laptop"></i></span> </a> </figcaption> </figure> <div class="card-body p-3"> <div class="post-meta pt-2 d-flex align-items-center justify-content-between"> <div> <a href="https://themesberg.com/product/ui-kit/neumorphism-ui-kit-bootstrap" class="mb-2 d-block mt-0 h5 text-dark">Neumorphism UI</a> <p class="font-weight-light text-gray small m-0">Free Neumorphism inspired user interface kit</p> </div> </div> <hr class="bg-soft"> <div class="d-flex align-items-center justify-content-between"> <div> <a href="https://themesberg.com/product/ui-kit/neumorphism-ui-kit-bootstrap" class="product-price text-dark">Free</a> </div> <div class="product-counters d-flex"> <a href="https://themesberg.com/product/ui-kit/neumorphism-ui-kit-bootstrap" class="product-card-downloads font-small text-gray-700"> <i class="fad fa-download mr-1"></i> 8873 </a> <a href="https://themesberg.com/product/ui-kit/neumorphism-ui-kit-bootstrap#reviews" class="product-card-downloads font-small text-gray-700 ml-3"> <i class="far fa-star mr-1"></i> 4.8/5 </a> </div> </div> </div> </div> </div> </div> <div class="col-12 text-center"> <a href="https://themesberg.com/themes" class="btn btn-primary"><i class="fad fa-th-list mr-2"></i> View all Themes</a> </div> </aside> </div> </section> </article> </main> <section class="footer section section-md mb-5 pt-0 pb-0"> <div class="container"> <div class="row position-relative no-gutters z-2 shadow-sm rounded bg-white"> <div class="col-12 col-lg-6 bg-white rounded"> <div class="border-left-md border-soft py-4 px-3 px-lg-5 m-0 bg-white rounded"> <p class="mb-2 h4">Join our community</p> <p class="font-medium mb-3">Get access to free templates and themes used by over 89525 web developers.</p> <a class="btn btn-sm btn-outline-primary d-none d-sm-inline-block mb-4" href="https://themesberg.com/register"> Create an account for free <span class="fas fa-long-arrow-alt-right ml-2"></span> </a> <p class="text-md">Follow us on social media:</p> <ul class="d-flex flew-row list-style-none"> <li class="mr-3"> <a href="https://twitter.com/themesberg" rel="nofollow noopener" target="_blank" class="btn-sm btn-icon-only rounded-circle btn-twitter" data-toggle="tooltip" data-placement="bottom" title="Follow @themesberg"> <span class="btn-inner-icon"><i class="fab fa-twitter"></i></span> </a> </li> <li class="mr-3"> <a href="https://www.facebook.com/themesberg/" rel="nofollow noopener" target="_blank" class="btn-sm btn-icon-only rounded-circle btn-facebook" data-toggle="tooltip" data-placement="bottom" title="Like Themesberg"> <span class="btn-inner-icon"><i class="fab fa-facebook"></i></span> </a> </li> <li class="mr-3"> <a href="https://github.com/themesberg" rel="nofollow noopener" target="_blank" class="btn-sm btn-icon-only rounded-circle btn-github" data-toggle="tooltip" data-placement="bottom" title="Open source projects"> <span class="btn-inner-icon"><i class="fab fa-github"></i></span> </a> </li> <li class="mr-3"> <a href="https://www.instagram.com/themesberg/" rel="nofollow noopener" target="_blank" class="btn-sm btn-icon-only rounded-circle btn-instagram" data-toggle="tooltip" data-placement="bottom" title="Follow us on Instagram"> <span class="btn-inner-icon"><i class="fab fa-instagram"></i></span> </a> </li> <li class="mr-3"> <a href="https://dribbble.com/themesberg" rel="nofollow noopener" target="_blank" class="btn-sm btn-icon-only rounded-circle btn-dribbble" data-toggle="tooltip" data-placement="bottom" title="Follow us on Dribbble"> <span class="btn-inner-icon"><i class="fab fa-dribbble"></i></span> </a> </li> <li class="mr-3"> <a href="https://www.linkedin.com/company/themesberg/" rel="nofollow noopener" target="_blank" class="btn-sm btn-icon-only rounded-circle btn-linkedin" data-toggle="tooltip" data-placement="bottom" title="Follow us on LinkedIn"> <span class="btn-inner-icon"><i class="fab fa-linkedin"></i></span> </a> </li> </ul> </div> </div> <div class="col-12 col-lg-6 bg-white rounded"> <div class="border-left-md border-soft py-4 px-3 px-lg-5 m-0 bg-white rounded"> <p class="mb-2 h4">Subscribe to our newsletter</p> <p class="mb-4 text-md">New themes, blog posts, marketplace journey. No spam.</p> <script async data-uid="4e9649fabb" src="https://fabulous-artisan-1281.ck.page/4e9649fabb/index.js"></script> </div> </div> </div> </div> </section> <footer class="pb-6 pt-9 bg-soft mt-n8"> <div class="container"> <div class="row mb-5 justify-content-center"> <div class="col-auto"> <a class="footer-brand" href="https://themesberg.com"> <img class="navbar-brand-light" height="35" src="https://themesberg.com/img/brand/themesberg-footer.svg" alt="Logo Themesberg"> </a> </div> </div> <ul class="text-md-center mb-4 text-center footer-links pl-0"> <li class="list-inline-item text-md px-0 px-sm-2 mb-2"><a href="https://flowbite.com/" target="_blank">Flowbite - Tailwind Components</a></li> <li class="list-inline-item text-md px-0 px-sm-2 mb-2"><a href="https://themesberg.com/terms-and-conditions">Terms and Conditions</a></li> <li class="list-inline-item text-md px-0 px-sm-2 mb-2"><a href="https://themesberg.com/privacy-policy">Privacy Policy</a></li> <li class="list-inline-item text-md px-0 px-sm-2 mb-2"><a href="https://themesberg.com/cookie-policy">Cookie Policy</a></li> <li class="list-inline-item text-md px-0 px-sm-2 mb-2"><a href="https://themesberg.com/licensing">Licensing</a></li> <li class="list-inline-item text-md px-0 px-sm-2 mb-2"><a href="https://themesberg.com/knowledge-center">Knowledge Center</a></li> <li class="list-inline-item text-md px-0 px-sm-2 mb-2"><a href="https://themesberg.com/custom-development">Custom Development</a></li> <li class="list-inline-item text-md px-0 px-sm-2 mb-2"><a href="https://themesberg.com/contact">Contact</a></li> </ul> <div class="row justify-content-center text-center"> <div class="col-12"> <small class="text-gray-700">© 2019-2024 All Rights Reserved. Themesberg™ is a registered trademark of Crafty Dwarf LLC.</small> </div> </div> </div> </footer> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/waypoints/4.0.1/jquery.waypoints.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.0/js/bootstrap.bundle.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/vanilla-lazyload@15.1.1/dist/lazyload.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/smooth-scroll/16.1.0/smooth-scroll.min.js"></script> <script src="https://themesberg.com/js/themesberg.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.16.0/prism.min.js"></script> <script type="application/ld+json"> { "@context": "http://schema.org", "@type": "HowTo", "name": "How to add Tailwind CSS to HTML?", "description": "Learn how to add Tailwind CSS to your HTML templates", "image": { "@type": "ImageObject", "url": "https://themesberg.s3.us-east-2.amazonaws.com/public/knowledge-center/tailwind-css/tailwind-css-html.jpg" }, "estimatedCost": { "@type": "MonetaryAmount", "currency": "USD", "value": "0" }, "step": [ { "@type": "HowToStep", "url": "https://themesberg.com/knowledge-center/tailwind-css/html#step1", "name": "Include Tailwind CSS via CDN", "itemListElement": [{ "@type": "HowToDirection", "text": "If you want to quickly get started using Tailwind CSS and play around with the utility-first classes, just include the following CDN link inside the <head> tag of your HTML template" }] }, { "@type": "HowToStep", "url": "https://themesberg.com/knowledge-center/tailwind-css/html#step2", "name": "Install Tailwind CSS via NPM", "itemListElement": [{ "@type": "HowToDirection", "text": "Although it requires a bit more setup and it requires further knowledge of the terminal and JavaScript, it is most definitely the best way to make use of all of the features that Tailwind CSS can provide." }] } ] } </script> </body> </html>