search results:

    Get started License Playground Services Free hosting Community
    • + D
    • Light
    • Dark
    Tailwind Elements
    • Getting started
      • Quick start
      • Dark mode
      • Theming
      • Changelog
      • Contribute
    • Integrations
      • Angular
      • Django
      • Express
      • Laravel
      • Next
      • Nuxt
      • React
      • Svelte
      • Vue
    • Content & styles
      • Animations
      • Colors
      • Dividers
      • Figures
      • Headings
      • Hover effects
      • Icons
      • Images
      • Mask
      • Shadows
      • Typography
    • Navigation
      • Breadcrumbs
      • Footer
      • Headers
      • Mega menu
      • Navbar
      • Offcanvas
      • Pagination
      • Pills
      • Scrollspy
      • Sidenav
      • Tabs
    • Components
      • Accordion
      • Alerts
      • Avatar
      • Badges
      • Button group
      • Buttons
      • Cards
      • Carousel
      • Chips
      • Collapse
      • Dropdown
      • Gallery
      • Jumbotron
      • Link
      • List group
      • Modal
      • Notifications
      • Paragraphs
      • Placeholders
      • Popover
      • Progress
      • Rating
      • Scroll back to top button
      • Social buttons
      • Spinners
      • Stepper
      • Testimonials
      • Timeline
      • Toast
      • Tooltip
      • Video
      • Video carousel
    • Forms
      • Checkbox
      • Datepicker
      • File input
      • Form templates
      • Input Group
      • Inputs
      • Login form
      • Radio
      • Range
      • Registration form
      • Search
      • Select
      • Switch
      • Textarea
      • Timepicker
    • Data
      • Charts
      • Tables
    • Methods
      • Ripple
    • Design Blocks
      • Banners
      • Contact
      • Content
      • CTA
      • FAQ
      • Features
      • Headers
      • Hero / Intro sections
      • Logo clouds
      • Mega menu
      • News
      • Newsletter
      • Pricing
      • Projects
      • Stats
      • Team
      • Testimonials
    • Coming Soon
      • Angular
      • Builder
      • React
      • Templates
      • Vue

    Quick Start

    Install Tailwind Elements via npm, via command line, via CDN or download a free .zip package. Use our open source Tailwind CSS components for free.


    Tailwind Elements is a plugin that extends the functionality of the library with many interactive components.

    In some dynamic components (like dropdowns or modals) we add custom JavaScript. However, they do not require any additional installation, all the necessary code is always included in the example and copied to any Tailwind project - it will work.


    NPM

    NPM is a recommended way to work with Tailwind Elements and others libraries.

    Make sure that you have Node.js installed. In order to verify that, open a command line and type node -v. If node is installed you should see it's version in a console.

    1. Before starting the project make sure to install Node.js (LTS) and TailwindCSS.

    2. Run the following command to install the package via NPM:

    • terminal
            
                
      npm install tw-elements
      
            
        

    3. Tailwind Elements is a plugin and should be included inside tailwind.config.js. It is also recommended to extend the content array with a js files pattern that loads dynamic component classes:

    • tailwind.config.js
            
                
      module.exports = {
        content: [
          "./src/**/*.{html,js}",
          "./node_modules/tw-elements/dist/js/**/*.js"
        ],
        plugins: [require("tw-elements/dist/plugin")]
      };
      
            
        

    4. Dynamic components will work after adding the js file:

    • index.html
            
                
      <script src="./TW-ELEMENTS-PATH/dist/js/index.min.js"></script>
      
            
        

    Alternatively, you can import it in the following way (bundler version):

    • index.js
            
                
      import * as te from 'tw-elements';
      
            
        

    MDB GO / CLI

    Create, deploy and host anything with a single command.

    1. To start using MDB GO / CLI install it with one command:

    • terminal
            
                
      npm install -g mdb-cli
      
            
        

    2. Log into the CLI using your MDB account:

    • terminal
            
                
      mdb login
      
            
        

    3. Initialize a project and choose Tailwind Elements from the list:

    • terminal
            
                
      mdb init tailwind-elements-free
      
            
        

    4. Install the dependencies (inside the project directory):

    • terminal
            
                
      npm install
      
            
        

    5. Run the app:

    • terminal
            
                
      npm start
      
            
        

    6. Publish when you're ready:

    • terminal
            
                
      mdb publish
      
            
        

    CDN

    You can easily test Tailwind Elements by adding CDN scripts to your classic HTML template without the need for installing any packages.

    Add the stylesheet files below in the head section:

    • index.html
            
                
      <link
        href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,900&display=swap"
        rel="stylesheet" />
      <link
        rel="stylesheet"
        href="https://cdn.jsdelivr.net/npm/tw-elements/dist/css/index.min.css" />
      <script src="https://cdn.tailwindcss.com/3.2.4"></script>
      <script>
        tailwind.config = {
          darkMode: "class",
          theme: {
            fontFamily: {
              sans: ["Roboto", "sans-serif"],
              body: ["Roboto", "sans-serif"],
              mono: ["ui-monospace", "monospace"],
            },
          },
          corePlugins: {
            preflight: false,
          },
        };
      </script>
      
            
        

    Require the js bundled file right before the body closing tag:

    • index.html
            
                
      <script src="https://cdn.jsdelivr.net/npm/tw-elements/dist/js/index.min.js"></script>
      
            
        

    Starter

    In order to quickly test Tailwind Elements simply download our starter. Keep in mind that this is not an optimized for production version, but only a demo for testing.

    • NPM
    • MDB GO / CLI
    • CDN
    • Starter
    Get useful tips & free resources directly to your inbox along with exclusive subscriber-only content.
    Join our mailing list now
    © 2023 Copyright: MDBootstrap.com