tailwindcss VS Svelte-Tailwind

I install Tailwind in Svelte using svelte-adder. But, when typing the same code in App.svelte (using svelte-adder, I get this.

(Or related package manager). It’s a simple adder that does a couple things - namely creates a tailwind config file, adds dependencies to package.json, and initializes tailwind directives in a main css file. Immediately able to use tailwind after doing this. docs if you’d like more info

how did you add it to your project. for new projects I recommend using svelte-add

I'm using Tailwind with SvelteKit on my personal website and I was very pleased to find a tool that will setup Tailwind in a SvelteKit project - https://github.com/svelte-add/tailwindcss.

Credit for this package: https://github.com/svelte-add/tailwindcss

#! /usr/bin/env node const inquirer = require('inquirer'); const shell = require('shelljs'); const path = process.cwd(); const { questions, questionsTs } = require('./utils/questions.js'); inquirer.prompt(questions).then((answers) => { if (answers.framework === 'React') { inquirer.prompt(questionsTs).then((answersTs) => { if (answersTs.typescript === 'Yes') { shell.exec(`mkdir ${answers.projectName}`); shell.exec( `git clone https://github.com/GKaszewski/react-tailwind-typescript-template ${answers.projectName}` ); shell.cd(`${path}/${answers.projectName}`); shell.exec(`npm i`); console.log( '👨‍💻 Successfully installed all the required dependencies\nHappy hacking 🚀' ); } else { shell.exec(`mkdir ${answers.projectName}`); shell.exec( `git clone https://github.com/YashKumarVerma/react-tailwind-template ${answers.projectName}` ); console.log('🛠️ Successfully build the required files'); shell.cd(`${path}/${answers.projectName}`); shell.exec(`npm i`); console.log( '👨‍💻 Successfully installed all the required dependencies\nHappy hacking 🚀' ); } }); } else if (answers.framework === 'NextJS') { inquirer.prompt(questionsTs).then((answersTs) => { if (answersTs.typescript === 'Yes') { shell.exec(`mkdir ${answers.projectName}`); shell.exec( `git clone https://github.com/avneesh0612/next-starter ${answers.projectName}` ); shell.cd(`${path}/${answers.projectName}`); shell.exec(`npm i`); console.log( '👨‍💻 Successfully installed all the required dependencies\nHappy hacking 🚀' ); } else { shell.exec(`mkdir ${answers.projectName}`); shell.exec( `git clone https://github.com/Neeraj1005/Nextjs-tailwind-template ${answers.projectName}` ); shell.cd(`${path}/${answers.projectName}`); shell.exec(`npm i`); console.log( '👨‍💻 Successfully installed all the required dependencies\nHappy hacking 🚀' ); } }); } else if (answers.framework === 'Svelte') { shell.exec(`mkdir ${answers.projectName}`); shell.exec( `git clone https://github.com/jhanca-vm/Svelte-Tailwind ${answers.projectName}` ); shell.cd(`${path}/${answers.projectName}`); shell.exec(`npm i`); console.log( '👨‍💻 Successfully installed all the required dependencies\nHappy hacking 🚀' ); } else { shell.exec(`mkdir ${answers.projectName}`); shell.exec( `git clone https://github.com/web2033/vite-vue3-tailwind-starter ${answers.projectName}` ); shell.cd(`${path}/${answers.projectName}`); shell.exec(`npm i`); console.log( '👨‍💻 Successfully installed all the required dependencies\nHappy hacking 🚀' ); } });