Project Setup
- Initialize project
npm init svelte@next svelte-graphql
cd svelte-graphql
npm install
git init
git add .
npm run format
git commit -m 'init commit'
- Tailwind
npx svelte-add@latest tailwindcss
git add .
git commit -m 'add tailwindcss'
npm run format
- Additional Plug-ins
npm i -D graphql-request graphql env-cmd daisyui @tailwindcss/typography
npm i
touch .env
npm run dev -- --open --port 3333
- Configure DaisyUI & tailwindCss typography
// tailwind.config.js
const config = {
mode: 'jit',
purge: ['./src/**/*.{html,js,svelte,ts}'],
theme: {
extend: {},
},
// add daisyUI plugin
plugins: [require('@tailwindcss/typography'), require('daisyui')],
// config (optional)
daisyui: {
styled: true,
themes: true,
base: true,
utils: true,
logs: true,
rtl: false,
},
}
module.exports = config
- Add themes
<!-- app.html -->
<html lang="en" data-theme="corporate"></html>
- Setup GraphQL Client & Post EndPoint
- Add env-cmd
- Browser fetch from Post endpoint
