tailwindcss
Svelte-Tailwind
DISCONTINUED
Our great sponsors
tailwindcss | Svelte-Tailwind | |
---|---|---|
7 | 2 | |
716 | 146 | |
0.7% | - | |
5.0 | 0.6 | |
3 months ago | over 1 year ago | |
JavaScript | Svelte | |
MIT License | - |
Stars - the number of stars that a project has on GitHub. Growth - month over month growth in stars.
Activity is a relative number indicating how actively a project is being developed. Recent commits have higher weight than older ones.
For example, an activity of 9.0 indicates that a project is amongst the top 10% of the most actively developed projects that we are tracking.
tailwindcss
- SvelteKit + Tailwind CSS - I made a script to automate the setup!
-
Discrepancies between Tailwind Playground and Tailwind in Svelte
I install Tailwind in Svelte using svelte-adder. But, when typing the same code in App.svelte (using svelte-adder, I get this.
-
What's the correct way of setting up Tailwind with SvelteKit in 2022?
(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
- Svelte + Vite + Electron
-
Tailwind 3 isnβt generating new classes when developing in SvelteKit
how did you add it to your project. for new projects I recommend using svelte-add
-
Making sense of Tailwind in Svelte
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.
Svelte-Tailwind
- Tailwind 3 isnβt generating new classes when developing in SvelteKit
-
How to build a CLI using NodeJS π»
#! /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 π' ); } });
What are some alternatives?
tauri - Build smaller, faster, and more secure desktop applications with a web frontend.
sveltekit-electron - Minimal Sveltekit + Electron starter template.
sveltekit-shiki-code-highlighting - SvelteKit Shiki syntax highlighting: use any VSCode colour theme to accessibly syntax highlight code on your SvelteKit app with line numbers.
svelte-adders - Easily add integrations and other functionality to Svelte apps
sveltekit-simple-image-gallery - Simple Svelte responsive image gallery: create a ribbon gallery, using Svelte dimension bindings to maintain the aspect ratio of all images.
svelte-meta-tags - Svelte Meta Tags provides components designed to help you manage SEO for Svelte projects.
clean-svelte-vite-electron - Cleanly combines svelte vite and electron.
svelte-adapter-firebase - SvelteKit adapter for Firebase Hosting rewrites to Cloud Functions for a Svelte SSR experience
tailwind-css-variables - Transform Tailwind config file to CSS variables.
esbuild-svelte - An esbuild plugin to compile Svelte components
sveltekit-starter - Sveltekit starter project created with sveltekit, typescript, tailwindcss, postcss, husky, and storybook. The project has the structure set up for the scaleable web application.
sveltekit-tailwind-starter - A barebones starter kit for SvelteKit and TailwindCSS that includes: TypeScript, Prettier, ESLint, PostCSS, and SASS.