https://github.com/hyper63/svite-template
https://github.com/hyper63/svite-template
Last synced: about 1 year ago
JSON representation
- Host: GitHub
- URL: https://github.com/hyper63/svite-template
- Owner: hyper63
- Created: 2021-01-13T17:26:28.000Z (about 5 years ago)
- Default Branch: master
- Last Pushed: 2021-01-13T17:43:25.000Z (about 5 years ago)
- Last Synced: 2025-01-13T05:41:36.244Z (about 1 year ago)
- Language: Svelte
- Size: 66.4 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# SVITE with Tailwind Template
This template setups a project with Svelte, Svite and Tailwind
## Automated
``` sh
npx bam github:hyper63/svite-template [PROJECT]
```
## Manual Steps
``` sh
mkdir myproject
cd myproject
yarn init -y
yarn add -D svelte svite postcss@7 tailwindcss@compat
touch postcss.config.js tailwind.config.js svelte.config.js
mkdir public src
touch public/favicon.svg
touch index.html
touch src/index.js src/index.css src/App.svelte
yarn add -D postcss-import@12
yarn add -D postcss-preset-env
yarn add -D svelte-preprocess
```
postcss.config.js
``` js
module.exports = {
plugins: [require('postcss-import'), require('tailwindcss'), require('postcss-preset-env')({ stage: 1 })],
};
```
tailwind.config.js
``` js
const { tailwindExtractor } = require('tailwindcss/lib/lib/purgeUnusedStyles');
const svelteClassColonExtractor = (content) => {
return content.match(/(?<=class:)([a-zA-Z0-9_-]+)/gm) || [];
};
module.exports = {
purge: {
enabled: process.env.NODE_ENV === 'production',
content: ['./src/**/*.svelte', './src/**/*.html', './src/**/*.css', './index.html'],
preserveHtmlElements: true,
options: {
safelist: [/svelte-/],
defaultExtractor: (content) => {
// WARNING: tailwindExtractor is internal tailwind api
// if this breaks after a tailwind update, report to svite repo
return [...tailwindExtractor(content), ...svelteClassColonExtractor(content)];
},
keyframes: true,
},
},
theme: {
extend: {
},
},
variants: {},
plugins: [],
};
```
svelte.config.js
``` js
const { postcss } = require('svelte-preprocess');
module.exports = {
preprocess: [postcss()],
};
```
index.html
``` html
Hello World
```
src/index.js
``` js
import App from './App.svelte';
import './index.css';
const app = new App({
target: document.body,
});
export default app;
```
src/index.css
``` css
@import 'tailwindcss/base.css';
@import 'tailwindcss/components.css';
@import 'tailwindcss/utilities.css';
```
src/App.svelte
``` svelte
Hello World
```
public/favicon.svg
``` svg
```
package.json
``` json
{
...
"scripts": {
"build": "svite build",
"dev": "svite"
}
}
```
## Congrats! You have setup a svite app with tailwindcss
## Acknowlegements
* Svite - https://github.com/dominikg/svite
* Svelte - https://svelte.dev
* Tailwindcss - https://tailwindcss.com