Svelete To DO List

Tech Stack

• Svelete Javascript Framework
• Tailwind
• Auth0

Create Svelte App

cd [my-svelte-project]

npm install

Note that you will need to have Node.js installed.

Initialize Tailwind

Install The Dependencies For Tailwind.

npm i -D @fullhuman/postcss-purgecss postcss postcss-load-config svelte-preprocess tailwindcss

Initialize Tailwind

npx tailwind init

This Will Create tailwind.config.js . It Can Be Edit Or Replace To Extend Tailwind Config.

Intergration

Will Need postcss.config.js. To Configure PostCSS To Process Styles With Tailwind. Also Need to Whitelist CSS Classes Generated By Svelete Itself Since Svelete Automatically Does.

postcss.config.js

  content: [
    './src/**/*.html',
    './src/**/*.svelte'
  ],

  whitelistPatterns: [/svelte-/],

  defaultExtractor: content => content.match(/[A-Za-z0-9-_:/]+/g) || []
});

const production = !process.env.ROLLUP_WATCH

module.exports = {
  plugins: [
    require('tailwindcss'),
    ...(production ? [purgecss] : [])
  ]
};

Tailwindcss.svelte File Includes A Svelte Component Which Only Has A Style Definition. We'll Use It To Inject Our Utility Classes Into The App.

src/Tailwindcss.svelte

  @tailwind base;
  @tailwind components;
  @tailwind utilities;
</style> 

Import Component Into The App.

<script>
  import Tailwindcss from './Tailwindcss.svelte';
  ...
</script>

...
<Tailwindcss />
...

Now Will Be Able To Use Classes Provided By Tailwind Inside Svelte App.

Finally, we'll tweak the rollup config to use svelte-preprocess to process components' styles.

import sveltePreprocess from 'svelte-preprocess'

...
svelte({
  ...
  preprocess: sveltePreprocess({ postcss: true }),
  ...
})
...

Build

Run The App By Using npm run dev Than Change Some Styles Inside App.svelte