• svelte-adders

  19 1,394 8.0 JavaScript

  Easily add integrations and other functionality to Svelte apps

  

I've created a couple of example projects using the npm init command for both Vite and Svelte. Added in Tailwind support using Svelte Add and replaced the index page styles on each with Tailwind styles.

• SvelteKit

  611 17,636 9.8 JavaScript

  web development, streamlined (by sveltejs)

  

So the whole bottom section for the tags removed as I'll be adding the Tailwind classes to the HTML elements.

To recreate the

classes I've added the git diff here:


+
+  

+    

      
        
        
      
    

    to your new
SvelteKit app
  

  

    try editing src/routes/index.svelte
  

  

Enter fullscreen mode Exit fullscreen mode

That's it for this file, if you want to tackle the rest of the project take special note of the src/app.css file, there are a lot of global styles are defined.

Moving onto doing it with Vite!

With SvelteKit npm init vite@latest

Same process now with the Vite CLI, I'll start with the npm init vite@next command and give it a name vite-tailwind-svelte.


npm init svelte@next vite-tailwind-svelte

Enter fullscreen mode Exit fullscreen mode

I'll choose the following options from the CLI:


? Select a framework: › - Use arrow-keys. Return to submit.
    vanilla
    vue
    react
    preact
    lit
❯   svelte

Enter fullscreen mode Exit fullscreen mode

Then svelte.


? Select a variant: › - Use arrow-keys. Return to submit.
❯   svelte
    svelte-ts

Enter fullscreen mode Exit fullscreen mode

The instructions from the Vite CLI are pretty much the same as the Svelte one:


Done. Now run:

  cd vite-tailwind-svelte
  npm install
  npm run dev

Enter fullscreen mode Exit fullscreen mode

Once I've checked the project is running with no issues I'll initialise git to highlight changes in the code:


git init && git add -A && git commit -m "Initial commit"

Enter fullscreen mode Exit fullscreen mode

Now time to add in Tailwind with Svelte Add:


# kill the dev server if it's still running with Ctrl+c
npx svelte-add@latest tailwindcss
# install the newly configured dependencies
npm i

Enter fullscreen mode Exit fullscreen mode

Now I can make the changes in the index page which in this project is located src/App.svelte.

Again removing the </code> from the page, here's the git diff of that:<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight plaintext"><code><script> import logo from './assets/svelte.png' import Counter from './lib/Counter.svelte' </script> <main> <img src={logo} alt="Svelte Logo" /> <h1>Hello world!</h1> <Counter /> <p> Visit <a href="https://svelte.dev">svelte.dev</a> to learn how to build Svelte apps. </p> <p> Check out <a href="https://github.com/sveltejs/kit#readme">SvelteKit</a> for the officially supported framework, also powered by Vite! </p> </main> -<style> - :root { - font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, - Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; - } - - main { - text-align: center; - padding: 1em; - margin: 0 auto; - } - - img { - height: 16rem; - width: 16rem; - } - - h1 { - color: #ff3e00; - text-transform: uppercase; - font-size: 4rem; - font-weight: 100; - line-height: 1.1; - margin: 2rem auto; - max-width: 14rem; - } - - p { - max-width: 14rem; - margin: 1rem auto; - line-height: 1.35; - } - - @media (min-width: 480px) { - h1 { - max-width: none; - } - - p { - max-width: none; - } - } -

• SurveyJS

  surveyjs.io sponsored

  Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App. With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.

  

• Svelte

  631 76,291 9.9 JavaScript

  Cybernetically enhanced web apps

  

So the whole bottom section for the tags removed as I'll be adding the Tailwind classes to the HTML elements.

To recreate the

classes I've added the git diff here:


+
+  

+    

      
        
        
      
    

    to your new
SvelteKit app
  

  

    try editing src/routes/index.svelte
  

  

Enter fullscreen mode Exit fullscreen mode

That's it for this file, if you want to tackle the rest of the project take special note of the src/app.css file, there are a lot of global styles are defined.

Moving onto doing it with Vite!

With SvelteKit npm init vite@latest

Same process now with the Vite CLI, I'll start with the npm init vite@next command and give it a name vite-tailwind-svelte.


npm init svelte@next vite-tailwind-svelte

Enter fullscreen mode Exit fullscreen mode

I'll choose the following options from the CLI:


? Select a framework: › - Use arrow-keys. Return to submit.
    vanilla
    vue
    react
    preact
    lit
❯   svelte

Enter fullscreen mode Exit fullscreen mode

Then svelte.


? Select a variant: › - Use arrow-keys. Return to submit.
❯   svelte
    svelte-ts

Enter fullscreen mode Exit fullscreen mode

The instructions from the Vite CLI are pretty much the same as the Svelte one:


Done. Now run:

  cd vite-tailwind-svelte
  npm install
  npm run dev

Enter fullscreen mode Exit fullscreen mode

Once I've checked the project is running with no issues I'll initialise git to highlight changes in the code:


git init && git add -A && git commit -m "Initial commit"

Enter fullscreen mode Exit fullscreen mode

Now time to add in Tailwind with Svelte Add:


# kill the dev server if it's still running with Ctrl+c
npx svelte-add@latest tailwindcss
# install the newly configured dependencies
npm i

Enter fullscreen mode Exit fullscreen mode

Now I can make the changes in the index page which in this project is located src/App.svelte.

Again removing the </code> from the page, here's the git diff of that:<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight plaintext"><code><script> import logo from './assets/svelte.png' import Counter from './lib/Counter.svelte' </script> <main> <img src={logo} alt="Svelte Logo" /> <h1>Hello world!</h1> <Counter /> <p> Visit <a href="https://svelte.dev">svelte.dev</a> to learn how to build Svelte apps. </p> <p> Check out <a href="https://github.com/sveltejs/kit#readme">SvelteKit</a> for the officially supported framework, also powered by Vite! </p> </main> -<style> - :root { - font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, - Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; - } - - main { - text-align: center; - padding: 1em; - margin: 0 auto; - } - - img { - height: 16rem; - width: 16rem; - } - - h1 { - color: #ff3e00; - text-transform: uppercase; - font-size: 4rem; - font-weight: 100; - line-height: 1.1; - margin: 2rem auto; - max-width: 14rem; - } - - p { - max-width: 14rem; - margin: 1rem auto; - line-height: 1.35; - } - - @media (min-width: 480px) { - h1 { - max-width: none; - } - - p { - max-width: none; - } - } -

Suggest a related project