search results:

    License Free hosting Learn Playground Services Community
    • + D
    • Light
    • Dark
    • System
    logo Tailwind Elements
    • Getting started
      • Quick start
      • Tutorials
      • Optimization
      • Dark mode
      • Theming
      • Changelog
      • Contribute
    • Integrations
      • Angular
      • Django
      • Express
      • Laravel
      • Next
      • Nuxt
      • React
      • Remix
      • Solid
      • 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
    • ResourcesNew
      • YouTube Channel
      • Private FB Group
      • Newsletter
      • UI Design course New

    Tailwind Elements Svelte integration

    This article shows you how to integrate Svelte application with Tailwind Elements. Free download, open source license.


    Prerequisites

    Before starting the project make sure to install the following utilities:

    • Node LTS (14.x.x or higher recommended)
    • Code editor. We recommend VSCode

    Creating a new Svelte application

    Let's create a fresh Svelte application so that we can go through all the steps together.

    Step 1

    Create new project.

    • Terminal
            
                
              npm create svelte@latest my-project
              cd my-project
            
            
        

    Step 2

    Install all dependencies.

    • Terminal
            
                
              npm install
            
            
        

    Installing and configuring Tailwind CSS and Tailwind Elements

    Step 1

    Install Tailwind CSS

    • Terminal
            
                
              npm install -D tailwindcss postcss autoprefixer
              npx tailwindcss init tailwind.config.cjs -p
            
            
        

    Step 2

    Add the paths to all of your template files in your tailwind.config.cjs file.

    • tailwind.config.cjs
            
                
            /** @type {import('tailwindcss').Config} */
            module.exports = {
            content: [
                "./src/**/*.{html,js,svelte,ts}",
                "./node_modules/tw-elements/dist/js/**/*.js"
            ],
            theme: {
                extend: {},
            },
            darkMode: "class",
            plugins: [require("tw-elements/dist/plugin.cjs")]
            }
            
            
        

    Step 3

    In your svelte.config.js file, import vitePreprocess to enable processing style blocks as PostCSS.

    • svelte.config.js
            
                
              import adapter from '@sveltejs/adapter-auto';
              import { vitePreprocess } from '@sveltejs/kit/vite';
    
              /** @type {import('@sveltejs/kit').Config} */
              const config = {
                kit: {
                  adapter: adapter()
                },
                preprocess: vitePreprocess()
              };
    
              export default config;
            
            
        

    Step 4

    Create a ./src/app.css file and add the @tailwind directives for each of Tailwind’s layers.

    • app.css
            
                
            @tailwind base;
            @tailwind components;
            @tailwind utilities;
            
            
        

    Step 5

    Attach the Roboto font in app.html.

    • app.html
            
                
        <link
          href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,900&display=swap"
          rel="stylesheet" />
        
            
        

    Step 6

    Create a ./src/routes/+layout.svelte file and import the newly-created app.css file.

    • +layout.svelte
            
                
        <script>
          import "../app.css";
        </script>
    
        <slot />
        
            
        

    Step 7

    Install Tailwind Elements.

    • Terminal
            
                
            npm install tw-elements
            
            
        

    Step 8

    Create file +page.svelte in src directory and then import components which are you intend to use and necessary function initTE. Initialize initTE in a lifecycle method.

    • +page.svelte
            
                
        <script>
          import { onMount } from "svelte";
          import { Datepicker, Input, initTE } from "tw-elements";
    
          onMount(() => {
            initTE({ Datepicker, Input });
          });
        </script>
    
        <div
          class="relative mb-3"
          data-te-datepicker-init
          data-te-input-wrapper-init>
          <input
            type="text"
            class="peer block min-h-[auto] w-full rounded border-0 bg-transparent px-3 py-[0.32rem] leading-[1.6] outline-none transition-all duration-200 ease-linear focus:placeholder:opacity-100 peer-focus:text-primary data-[te-input-state-active]:placeholder:opacity-100 motion-reduce:transition-none dark:text-neutral-200 dark:placeholder:text-neutral-200 dark:peer-focus:text-primary [&:not([data-te-input-placeholder-active])]:placeholder:opacity-0"
            placeholder="Select a date" />
          <label
            for="floatingInput"
            class="pointer-events-none absolute left-3 top-0 mb-0 max-w-[90%] origin-[0_0] truncate pt-[0.37rem] leading-[1.6] text-neutral-500 transition-all duration-200 ease-out peer-focus:-translate-y-[0.9rem] peer-focus:scale-[0.8] peer-focus:text-primary peer-data-[te-input-state-active]:-translate-y-[0.9rem] peer-data-[te-input-state-active]:scale-[0.8] motion-reduce:transition-none dark:text-neutral-200 dark:peer-focus:text-primary"
            >Select a date</label
          >
        </div>
        
            
        

    Initializing via JS

    By default all components have autoinit which means they are initialized by data attributes. But if you want to make init by JavaScript - there is also possibility to do that.

    Step 1

    Import library and initialize components in lifecycle method.

    • +page.svelte
            
                
        <script>
          import { onMount } from "svelte";
          import { Datepicker, Input } from "tw-elements";
    
          onMount(() => {
            const myInput = new Input(document.getElementById("myDatepicker"));
            const options = {
              format: "dd-mm-yyyy",
            };
            const myDatepicker = new Datepicker(
              document.getElementById("myDatepicker"),
              options
            );
          });
        </script>
    
        <div class="relative mb-3" id="myDatepicker">
          <input
            type="text"
            class="peer block min-h-[auto] w-full rounded border-0 bg-transparent px-3 py-[0.32rem] leading-[1.6] outline-none transition-all duration-200 ease-linear focus:placeholder:opacity-100 peer-focus:text-primary data-[te-input-state-active]:placeholder:opacity-100 motion-reduce:transition-none dark:text-neutral-200 dark:placeholder:text-neutral-200 dark:peer-focus:text-primary [&:not([data-te-input-placeholder-active])]:placeholder:opacity-0"
            placeholder="Select a date" />
          <label
            for="floatingInput"
            class="pointer-events-none absolute left-3 top-0 mb-0 max-w-[90%] origin-[0_0] truncate pt-[0.37rem] leading-[1.6] text-neutral-500 transition-all duration-200 ease-out peer-focus:-translate-y-[0.9rem] peer-focus:scale-[0.8] peer-focus:text-primary peer-data-[te-input-state-active]:-translate-y-[0.9rem] peer-data-[te-input-state-active]:scale-[0.8] motion-reduce:transition-none dark:text-neutral-200 dark:peer-focus:text-primary"
            >Select a date</label
          >
        </div>
        
            
        
    • Prerequisites
    • Creating a new Svelte application
    • Installing and configuring Tailwind CSS and Tailwind Elements
    • Initializing via JS
    Get useful tips & free resources directly to your inbox along with exclusive subscriber-only content.
    Join our mailing list now
    © 2023 Copyright: MDBootstrap.com