blog

src/docs/src/routes/blog/(posts)/how-to-install-sveltekit-and-daisyui/+page.md

@@ -18,7 +18,7 @@ If you haven't used Svelte before, You would be surprised how easy it is to lear
 
 ## How to install SvelteKit?
 
-To start new SvelteKit project, you can use the following command:
+1. To start new SvelteKit project, you can use the following command:
 
 ```
 npm create svelte@latest my-app
@@ -37,7 +37,7 @@ Let's pick `Skeleton project`:
 └
 ```
 
-After the setup is done, go to the project directory and install dependencies and start the development server:
+2. After the setup is done, go to the project directory and install dependencies and start the development server:
 
 ```
 cd my-app
@@ -51,15 +51,15 @@ That's it! You have a new SvelteKit project.
 
 ## How to add Tailwind CSS and daisyUI to SvelteKit?
 
-Install Tailwind CSS, PostCSS, Autoprefixer and daisyUI,  
-Then generate tailwind.config.js and postcss.config.js files:
+1. Install Tailwind CSS, PostCSS, Autoprefixer and daisyUI,  
+   Then generate tailwind.config.js and postcss.config.js files:
 
 ```
 npm install -D tailwindcss postcss autoprefixer daisyui
 npx tailwindcss init -p
 ```
 
-Edit `tailwind.config.js` file. Add `content` and `plugins` to it:
+2. Edit `tailwind.config.js` file. Add `content` and `plugins` to it:
 
 ```diff
 /** @type {import('tailwindcss').Config} */
@@ -74,7 +74,7 @@ export default {
 }
 ```
 
-Add the following lines to `svelte.config.js` file:
+3. Add the following lines to `svelte.config.js` file:
 
 ```diff
 import adapter from '@sveltejs/adapter-auto';
@@ -93,7 +93,7 @@ const config = {
 export default config;
 ```
 
-Create a new `src/routes/+layout.svelte` file and import `tailwindcss/tailwind.css` in it using this command
+4. Create a new `src/routes/+layout.svelte` file and import `tailwindcss/tailwind.css` in it using this command
 
 ```sh
 echo '
@@ -105,6 +105,8 @@ echo '
 ' > src/routes/+layout.svelte
 ```
 
+## How to use daisyUI components in SvelteKit?
+
 Add a daisyUI button to `src/routes/+page.svelte` file:
 
 ```diff
@@ -113,11 +115,13 @@ Add a daisyUI button to `src/routes/+page.svelte` file:
 +<button class="btn btn-primary">Hello daisyUI</button>
 ```
 
-And run the development server again, and see the button with daisyUI styles!
+Run the development server and see the button with daisyUI styles!
 
 ```
 npm run dev -- --open
 ```
 
+Easy, right?
+
 Explore all the [daisyUI components](https://daisyui.com/components/) you can use in your project,  
 And also check out the [SvelteKit docs](https://kit.svelte.dev/) to learn more about SvelteKit.

src/docs/src/routes/blog/(posts)/install-daisyui-and-tailwindcss-in-nextjs/+page.md

@@ -1,5 +1,5 @@
 ---
-title: How to install daisyUI and Tailwind CSS in Next.js
+title: How to install daisyUI and Tailwind CSS in Next.js 14
 desc: In this article, we will learn how to use daisyUI component library in Next.js.
 published: true
 date: 2023-9-22
@@ -29,6 +29,12 @@ npx create-next-app@latest
 
 ![Install Next.js](/images/blog/install-nextjs.jpg)
 
+Go to the project directory. If you named it `my-app`:
+
+```
+cd my-app
+```
+
 ### Installing daisyUI
 
 3. Now install the latest version of daisyUI as a dev dependency:
@@ -37,12 +43,13 @@ npx create-next-app@latest
 npm i -D daisyui@latest
 ```
 
-4. Open `tailwind.config.js` file  
-   Add `require("daisyui")` to the `plugins` array:
+4. Open `tailwind.config.ts` file  
+   Add daisyUI as a plugin:
 
 ```diff
-/** @type {import('tailwindcss').Config} */
-module.exports = {
+import type { Config } from 'tailwindcss'
++ import daisyui from 'daisyui'
+const config: Config = {
   content: [
     './pages/**/*.{js,ts,jsx,tsx,mdx}',
     './components/**/*.{js,ts,jsx,tsx,mdx}',
@@ -58,13 +65,15 @@ module.exports = {
     },
   },
 - plugins: [],
-+ plugins: [require("daisyui")],
++ plugins: [daisyui],
 }
+export default config
+
 ```
 
 ### Using daisyUI
 
-5. Open `/app/page.js` file  
+5. Open `/app/page.tsx` file  
    Replace the content with:
 
 ```jsx
@@ -88,3 +97,11 @@ npm run dev
 And open `http://localhost:3000/` to see a button with daisyUI styles.
 
 You can now use any [daisyUI component](https://daisyui.com/components/) or any [Tailwind CSS utility class](https://tailwindcss.com/) in your Next.js project.
+
+7. Extra: You can also remove the default Next.js styles from `app/globals.css`, to have a clean start. Only keep the following line:
+
+```css
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+```