├── .eslintrc.json ├── .gitignore ├── .prettierrc.json ├── README.md ├── package.json ├── postcss.config.js ├── src ├── App.svelte ├── global.pcss ├── index.html └── main.js ├── tailwind.config.js └── yarn.lock /.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "env": { 3 | "browser": true, 4 | "es6": true 5 | }, 6 | "parserOptions": { 7 | "ecmaVersion": 2019, 8 | "sourceType": "module" 9 | }, 10 | "plugins": ["svelte3"], 11 | "extends": ["eslint:recommended"], 12 | "overrides": [ 13 | { 14 | "files": ["**/*.svelte"], 15 | "processor": "svelte3/svelte3" 16 | } 17 | ], 18 | "rules": { 19 | "prettier/prettier": "error", 20 | "svelte3/lint-template": 2 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .cache 2 | node_modules 3 | dist 4 | -------------------------------------------------------------------------------- /.prettierrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "tabWidth": 2, 3 | "semi": true, 4 | "singleQuote": true, 5 | "plugins": ["prettier-plugin-svelte"], 6 | "svelteSortOrder": "styles-scripts-markup", 7 | "svelteStrictMode": true, 8 | "svelteBracketNewLine": true, 9 | "svelteAllowShorthand": true 10 | } 11 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # svelte-tailwind-parcel-starter 2 | 3 | Svelte.js starter pack with [Yarn](https://yarnpkg.com/), 4 | [Tailwind](https://tailwindcss.com/) and [Parcel](https://parceljs.org/). Yummy mummy! 5 | 6 | The starter pack also includes 7 | [tailwindcss-font-inter](https://github.com/semencov/tailwindcss-font-inter) 8 | plugin for Tailwind plus Prettier and Eslint plugins with opinionated settings. 9 | 10 | This is the code for my article [Svelte + Tailwind + Parcel = Awesome!](https://codechips.me/svelte-tailwind-parcel-awesome/). 11 | 12 | ## Getting started 13 | 14 | ``` 15 | # create new project 16 | $ npx degit codechips/svelte-tailwind-parcel-starter facebook-killer 17 | $ cd facebook-killer 18 | 19 | # install required packages 20 | $ yarn 21 | 22 | # run the app 23 | $ yarn start 24 | 25 | # build the app 26 | $ yarn build 27 | ``` 28 | 29 | ## Testing 30 | 31 | Yep. You should definitely test your code. 32 | 33 | ## Disclaimer 34 | 35 | I take no responsibility if you get paid less because you have become more 36 | productive with these awesome tools and suddenly started getting things done 37 | faster. 38 | 39 | ## There is more! 40 | 41 | For more interesting stuff like this follow me on [Twitter](https://twitter.com/codechips) or check out my blog https://codechips.me 42 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "svelte-parcel-talwind-starter", 3 | "version": "1.0.0", 4 | "description": "Svelte with Tailwind and Parcel", 5 | "main": "./src/main.js", 6 | "author": "codechips", 7 | "license": "MIT", 8 | "private": false, 9 | "scripts": { 10 | "start": "parcel src/index.html --port 3000", 11 | "build": "rm -rf dist && parcel build src/index.html --no-source-maps" 12 | }, 13 | "browserslist": [ 14 | "last 1 chrome versions" 15 | ], 16 | "devDependencies": { 17 | "eslint-plugin-svelte3": "^2.7.3", 18 | "parcel-bundler": "^1.12.4", 19 | "parcel-plugin-svelte": "^4.0.6", 20 | "postcss-load-config": "^3.0.0", 21 | "postcss-preset-env": "^6.7.0", 22 | "prettier": "^2.1.2", 23 | "prettier-plugin-svelte": "^1.4.0", 24 | "svelte": "^3.29.0", 25 | "tailwindcss": "^1.8.10", 26 | "tailwindcss-font-inter": "^1.0.8" 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /postcss.config.js: -------------------------------------------------------------------------------- 1 | const postcssPresetEnv = require('postcss-preset-env'); 2 | 3 | const presetEnv = postcssPresetEnv({ 4 | /* use stage 3 features + css nesting rules */ 5 | stage: 3, 6 | features: { 7 | 'nesting-rules': true, 8 | }, 9 | }); 10 | 11 | module.exports = { 12 | plugins: [require('tailwindcss'), presetEnv], 13 | }; 14 | -------------------------------------------------------------------------------- /src/App.svelte: -------------------------------------------------------------------------------- 1 | 6 | 7 |
8 |
9 |

10 | {framework} 11 | + 12 | {css} 13 | + 14 | {bundler} 15 | = 16 | awesome 17 |

18 |

19 | * also includes 20 | Prettier 21 | and 22 | ESLint 23 | configs with opinionated settings 24 |

25 |
26 |
27 | -------------------------------------------------------------------------------- /src/global.pcss: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; 4 | -------------------------------------------------------------------------------- /src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | svelte.js + tailwind.css + parcel.js 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /src/main.js: -------------------------------------------------------------------------------- 1 | import App from './App.svelte'; 2 | 3 | const app = new App({ 4 | target: document.body 5 | }); 6 | 7 | export default app; 8 | 9 | -------------------------------------------------------------------------------- /tailwind.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | future: { 3 | removeDeprecatedGapUtilities: true, 4 | }, 5 | experimental: { 6 | uniformColorPalette: true, 7 | extendedFontSizeScale: true, 8 | applyComplexClasses: true, 9 | }, 10 | purge: { 11 | content: ['./src/index.html', './src/**/*.svelte'], 12 | whitelistPatterns: [/svelte-/], 13 | }, 14 | theme: { 15 | interFontFeatures: { 16 | default: ['calt', 'liga', 'kern'], 17 | numeric: ['tnum', 'salt', 'ss02'], 18 | }, 19 | extend: {}, 20 | }, 21 | variants: {}, 22 | plugins: [ 23 | require('tailwindcss-font-inter')({ 24 | importFontFace: true, 25 | disableUnusedFeatures: true, 26 | }), 27 | ], 28 | }; 29 | --------------------------------------------------------------------------------