Forem: Kamiswara Angga W.

Give your Linux system a boost with swap space!

Kamiswara Angga W. — Tue, 18 Mar 2025 09:05:36 +0000

Swap memory is an essential feature in Linux systems that serves as a safety net when your physical RAM runs low. For frontend developers working with memory-intensive frameworks like Next.js and Nuxt.js, having swap space can help prevent system crashes and maintain stability under heavy loads. In this article, we'll cover:

What swap memory is and why it's important
Step-by-step instructions to create swap on any Debian-based Linux system
How to determine the right swap size for your needs, especially on a system with 16GB of RAM
Tips on using swap effectively alongside demanding development tasks

What Is Swap Memory?

Swap is a dedicated space on your storage device (HDD or SSD) used by the operating system when the physical RAM is nearly exhausted. Although accessing swap is slower than accessing RAM, it provides an additional layer of memory management that can help prevent crashes during sudden memory spikes.

Why Is Swap Memory Important?

For developers who run resource-heavy applications or frameworks, swap memory offers several benefits:

Crash Prevention: Swap acts as a backup when your system's RAM reaches its limits, reducing the risk of application or system crashes.
Extra Memory Buffer: Even with 16GB of RAM, certain development tasks may temporarily require more memory than available. Swap fills this gap.
Hibernation Support: If you use hibernation, the swap space should ideally be at least as large as your RAM to store the entire system state.

Step-by-Step Guide to Creating Swap Memory

Follow these steps on any Debian-based Linux distribution to set up swap:

1. Create a Swap File

You can create a swap file using either fallocate (faster) or dd if fallocate is not available.

Using fallocate:

sudo fallocate -l 2G /swapfile

Using dd:

sudo dd if=/dev/zero of=/swapfile bs=1M count=2048

Note: Adjust the size (e.g., 2G or 2048 blocks) based on your desired swap space.

2. Set the Correct Permissions

Restrict access to the swap file so that only root can read and write:

sudo chmod 600 /swapfile

3. Mark the File as Swap

Initialize the file for swap usage:

sudo mkswap /swapfile

4. Enable the Swap File

Activate the swap file immediately:

sudo swapon /swapfile

5. Verify the Swap Space

Check if the swap is active using:

sudo swapon --show

free -h

6. Configure Swap to Activate at Boot

To ensure your swap space is available after a reboot, add the following entry to your /etc/fstab file:

echo '/swapfile none swap sw 0 0' | sudo tee -a /etc/fstab

Determining the Right Swap Size for a 16GB System

Choosing the correct swap size depends on your specific needs:

If you don't plan to use hibernation, 2GB to 4GB of swap space is typically sufficient even on systems with 16GB of RAM. The swap acts as an emergency buffer for unexpected memory spikes.
For hibernation, it is recommended to have swap space equal to your RAM size (i.e., 16GB) so the system can store the entire contents of the RAM.
When running heavy frameworks like Next.js or Nuxt.js that consume significant memory, having adequate swap space can safeguard against crashes during peak usage periods. However, keep in mind that swap is slower than RAM, so it's best used as a fallback rather than a primary memory resource.

Conclusion

Swap memory plays a vital role in maintaining system stability, especially on Debian-based Linux distributions used for development. By following this guide, you can create and configure swap space tailored to your system's needs—whether for occasional memory spikes or to support hibernation. For frontend developers working with heavy frameworks, swap ensures that unexpected memory demands do not bring your system to a halt.

Optimizing Next.js 15 App Router with template.tsx and CustomProviders

Kamiswara Angga W. — Fri, 07 Feb 2025 09:28:17 +0000

In modern web development, Server-Side Rendering (SSR) and Search Engine Optimization (SEO) are essential for creating fast, discoverable applications. Next.js has long been celebrated for its ability to handle both efficiently. With Next.js 15 and its new App Router, the framework now enables you to clearly separate server components from client components. One elegant solution to manage this separation while still supporting robust client-side interactivity is to use a dedicated template.tsx file that wraps a centralized CustomProviders component in a Suspense fallback. This approach makes it easy to integrate multiple providers—such as Redux, react-query, and various UI libraries—without compromising SSR or SEO.

In this article, we will cover:

An overview of the Next.js 15 App Router and the distinction between server and client components.
How to create a centralized CustomProviders component to encapsulate all client-side providers.
Wrapping CustomProviders in a Suspense component within template.tsx to manage loading states gracefully.
Best practices for integrating client-side providers without affecting SSR and SEO.

Next.js 15 App Router: Merging Server and Client Components

Next.js 15 introduces a new modular approach using the app/ directory, where components are by default treated as server components. This ensures that your pages are rendered on the server, providing fast load times and optimal SEO. However, not every part of your application can rely solely on SSR. Interactive features such as state management, data fetching (using libraries like react-query), and dynamic UI elements require client-side logic.

To enable client-side features, you mark specific components with the "use client" directive. This tells Next.js to treat those components as client components, enabling the use of browser-specific APIs and interactive functionality.

Centralizing Client-Side Logic with CustomProviders

Rather than scattering individual providers throughout your application, a more maintainable approach is to create a single component called CustomProviders. This component can encapsulate multiple providers (e.g., Redux for state management, react-query for data fetching, and any UI-specific context providers). This centralized approach makes your codebase cleaner and easier to maintain.

Here’s how you might define the CustomProviders component:

// components/CustomProviders.tsx
'use client';

import React from 'react';
import { Provider as ReduxProvider } from 'react-redux';
import { store } from '../store';
import { QueryClient, QueryClientProvider } from 'react-query';
// Import any additional providers, e.g., a theme provider from your UI library
import { ThemeProvider } from 'your-ui-library';

const queryClient = new QueryClient();

interface CustomProvidersProps {
  children: React.ReactNode;
}

export default function CustomProviders({ children }: CustomProvidersProps) {
  return (
    <ReduxProvider store={store}>
      <QueryClientProvider client={queryClient}>
        <ThemeProvider attribute="class">
          {children}
        </ThemeProvider>
      </QueryClientProvider>
    </ReduxProvider>
  );
}

In this example:

ReduxProvider: Integrates Redux for global state management.
QueryClientProvider: Provides react-query’s QueryClient instance for managing asynchronous data.
ThemeProvider: Demonstrates how to include a UI-related provider (replace with your actual UI library provider as needed).

Wrapping CustomProviders with Suspense in template.tsx

To gracefully handle loading states (for example, if any of the providers have asynchronous initialization logic), it is a good idea to wrap CustomProviders within a Suspense component. This can be done inside your template.tsx file:

// app/template.tsx
import React, { Suspense } from 'react';
import CustomProviders from '../components/CustomProviders';

export default function Template({ children }: { children: React.ReactNode }) {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <CustomProviders>
        {children}
      </CustomProviders>
    </Suspense>
  );
}

In this setup:

"use client" directive: Ensures that template.tsx and its children are treated as client components.
<Suspense> component: Wraps CustomProviders, providing a fallback UI (here, a simple "Loading..." div) during lazy loading or asynchronous initialization.
Centralized client-side interactivity: This structure centralizes all client-side interactivity within CustomProviders, ensuring that pages that don’t need these features can still be server-rendered efficiently.

Best Practices When Using CustomProviders and template.tsx

Isolate Client Providers: Keep only the providers and UI components that require client-side behavior within CustomProviders. This ensures that the server-rendered parts of your application remain unaffected.
Modularize Providers: As your application grows, consider breaking down providers into smaller sub-components or modules within CustomProviders for easier maintenance.
Monitor Performance: As you integrate more client-side logic, keep an eye on bundle size and overall performance to maintain a smooth user experience.
Handle Suspense Gracefully: Choose appropriate fallback content for Suspense to provide clear feedback to users during asynchronous operations.

Conclusion

Using a centralized CustomProviders component inside template.tsx is an elegant and maintainable way to integrate multiple client-only providers—such as Redux, react-query, and UI libraries—into your Next.js 15 application. By wrapping CustomProviders in a Suspense component, you can manage loading states effectively while ensuring that SSR and SEO remain intact. This approach provides a clear separation of concerns, ensuring that interactive client-side features do not compromise the performance and search engine visibility of your application.

Happy coding, and may your Next.js projects be both interactive and SEO-friendly!

Don't Build React & Next.js Apps with ChatGPT Without Becoming a Developer First

Kamiswara Angga W. — Mon, 03 Feb 2025 10:50:32 +0000

The debate over whether AI can replace programmers has been ongoing for a while. However, after learning and observing AI's development recently, I am more convinced that AI will not fully replace programmers—at least not in the near future.

There are already several platforms that allow website or even startup application development using AI. However, in reality, the quality and design of these AI-generated projects are still far from ideal. The designs often lack user experience optimization and fail to meet industry standards.

A while ago, there was news claiming that a company had developed AI capable of coding, debugging, and even searching autonomously. Upon further investigation, this information turned out to be either exaggerated or outright false. The belief that AI can completely replace programmers is premature and needs to be clarified.

I've encountered people who have no understanding of React or Next.js yet attempt to build a startup application using AI alone. Without proper UI/UX design in Figma, they rely solely on ChatGPT to generate code. The result? The code is often bloated, non-reusable, and filled with redundancies. I’ve worked with a team where someone took this approach, and the outcome was far from satisfactory.

Do not build applications solely with AI if you don’t understand coding yourself. How can you conclude that coding in React and Next.js can be entirely replaced by AI if you don’t understand React and Next.js at all? Moreover, if we ask AI, whether it's ChatGPT or DeepSeek, they are not even aware that Next.js is now at version 15. They still think it’s at version 13. This proves that as developers, we still need to read documentation and keep learning.

For example, React has essential concepts like useState and useEffect, while Next.js involves SSR (Server-Side Rendering) and CSR (Client-Side Rendering). It took me more than 2 months to learn these frameworks properly. In my opinion, if you want to utilize AI for coding, you should first become a developer and dedicate at least 2 months to learning these technologies.

As developers, we understand these shortcomings, but to the general public, AI might seem like a magical solution for building applications. The reality is, if someone lacks fundamental coding knowledge and depends entirely on AI, the final product can be a disaster. On the other hand, if someone already understands coding and leverages AI as a tool, the results can be extraordinary.

In conclusion, using AI for coding is not inherently wrong—as long as you have a solid understanding of programming fundamentals. AI should be seen as a tool to enhance and accelerate development, not as a complete replacement for developers.

Automatically Monitor and Manage RAM Usage for Next.js Development

Kamiswara Angga W. — Wed, 08 Jan 2025 09:03:29 +0000

When working with heavy frameworks like Next.js 14 and above, you might notice significant memory usage, especially during development. If your system has limited resources, running yarn dev or pnpm dev can sometimes cause your machine to hang or become unresponsive. In this article, we will create a simple Bash script to monitor RAM usage and automatically stop the development server if the usage exceeds a defined limit.

Why Monitor Memory Usage?

High RAM usage can slow down your system, leading to decreased productivity and potential data loss if the machine crashes. By automating the process of stopping heavy processes when memory usage crosses a certain threshold, you can prevent such issues and ensure smoother development.

The Script

Here is the Bash script that monitors RAM usage and terminates processes when necessary:

#!/bin/bash

# RAM usage limit (percentage)
LIMIT=95  # Change to 90 if you want a lower limit

# Function to get current RAM usage
get_ram_usage() {
    free | awk '/Mem:/ {printf "%.0f", $3/$2 * 100}'
}

# Loop to monitor RAM periodically
while true; do
    RAM_USAGE=$(get_ram_usage)
    echo "RAM usage: $RAM_USAGE%"
    if (( RAM_USAGE >= LIMIT )); then
        echo "RAM has reached the limit of $LIMIT%. Stopping node processes."
        killall -SIGINT node
    fi
    sleep 5  # Check every 5 seconds
done

Copy the script and save it as monitor_ram.sh.

Explanation of the Script

LIMIT: Sets the threshold for RAM usage. You can adjust this value as needed.
get_ram_usage: Calculates current memory usage using the free command.
Main Loop: Continuously monitors memory usage and stops all Node.js processes if the limit is exceeded.

How to Use the Script

Make the script executable:

chmod +x monitor_ram.sh

Run the script:

./monitor_ram.sh

The script will monitor your RAM usage and stop the development server if the usage exceeds the defined limit.

Here’s a screenshot of the script in action:

In this example, when the RAM usage hits 95%, the script successfully terminates the Node.js processes, reducing the RAM usage and keeping the system responsive.

Conclusion

This script provides a simple and effective way to prevent system crashes due to high memory usage during Next.js development. Although the example provided here is specifically for Linux-based systems like Debian or Ubuntu, you can adapt the script for macOS or Windows as well. If the Bash script doesn't work out of the box, you can always ask ChatGPT for help to tailor it to your operating system.

Moreover, the concept isn't limited to monitoring RAM for Next.js. You can modify the script to work with other technologies by following the same principle: monitor resource usage and terminate services or processes that are consuming too much memory. Feel free to experiment and expand on this idea!

If you have any questions or suggestions, let me know in the comments. Happy coding!

Menghitung Batas Maksimal Ukuran File di JavaScript

Kamiswara Angga W. — Sun, 24 Jul 2022 02:15:23 +0000

Di dalam framework JavaScript modern, ketika kita upload file, biasanya kita bikin function handler untuk menangani jika terjadi perubahan pada isi dari input bertipe file. Misalnya di Vue JS seringnya seperti ini:

async fileChange(e) {
  if (e.target.files[0].size / (1024 * 1024) > 10) {
    this.fileError = "File size is too large (max 10 MB)";
  } else {
    this.file = e.target.files[0];
  }
},

Maksud dari code di atas adalah, jika ukuran file yang dipilih lebih dari 10 MB, maka akan muncul pesan error. Jika ukuran file kurang dari atau sama dengan 10 MB, maka file akan ditaruh di dalam state.

Kenapa kita harus tulis code (1024 * 1024) di code kita? Kenapa kita gak langsung tuliskan 1048576?

Karena ada perbedaan perhitungan ukuran file di sistem operasi yang berbeda. Misal perhitungan ukuran file di Windows berbeda dengan Linux Ubuntu.

Perhitungan file di Windows:

Perhitungan file di Ubuntu Linux:

Baca lebih lanjut:

https://askubuntu.com/questions/341143/why-same-file-shows-different-sizes-in-different-operating-systems

Dengan solusi ini, perbedaan perhitungan di OS yang berbeda bisa diatasi, solusi menurutmu kaya gimana?

Calculating Maximum File Size Limit in JavaScript

Kamiswara Angga W. — Sun, 24 Jul 2022 02:09:49 +0000

In modern JavaScript frameworks, when we upload a file, we usually create a function handler to handle if there is a change in the contents of the input file type. For example in Vue JS it's often like this:

async fileChange(e) {
  if (e.target.files[0].size / (1024 * 1024) > 10) {
    this.fileError = "File size is too large (max 10 MB)";
  } else {
    this.file = e.target.files[0];
  }
},

The purpose of the code above is, if the selected file size is more than 10 MB, an error message will appear. If the file size is less than or equal to 10 MB, then the file will be put in state.

Why we need to calculate (1024 * 1024) in our code? Why don't we just replace the code with 1048576?

Because there are differences in file size calculations in different operating systems. For example, the calculation of file size in Windows is different from Ubuntu Linux.

File calculation in Windows:

File calculation in Ubuntu Linux:

Chart JS di Nuxt JS

Kamiswara Angga W. — Fri, 22 Jul 2022 09:45:00 +0000

Lihat cara saya menggunakan Chart JS di Nuxt JS menggunakan vue-chartjs 3.5.1. Omong-omong, saya menggunakan Nuxt 2 dengan Vue 2 di dalamnya, dan saya menggunakan Tailwind CSS dalam proyek saya. Pastikan dokumentasi Chart JS yang kamu buka adalah versi 2.9.4 karena tutorial ini memberi tahu kamu tentang versi 2.9.4.

1. Tambahkan 2 dependency ini ke package.json

{
  ...
  "dependencies": {
    "chart.js": "2.9.4",
    "vue-chartjs": "^3.5.1"
  }
  ...
}

Jalankan yarn install atau npm install

2. chart.js plugin file

Buat file baru di folder plugins di proyek Nuxt punyamu, jika folder plugins belum ada, buat saja. File baru ini dapat diberi nama apa saja, tetapi kita akan menamainya chart.js.

Isi dari file chart.js:

import Vue from 'vue'
import { Bar } from 'vue-chartjs'

Vue.component('BarChart', {
  extends: Bar,
  props: {
    data: {
      type: Object,
      required: true,
    },
    options: {
      type: Object,
      required: false,
      default: () => ({
        responsive: true,
        maintainAspectRatio: false,
        legend: {
          display: false,
        },
      }),
    },
  },
  watch: {
    data() {
      this.renderChart(this.data, this.options)
    },
  },
  mounted() {
    this.renderChart(this.data, this.options)
  },
})

3. nuxt.config.js

export default {
  ...
  plugins: ['@/plugins/chart.js'],
  ...
}

Tambahkan plugin chart.js ke file nuxt.config.js di property plugins.

4. Buat component

<template>
  <div class="p-2 border border-gray-500 mt-4">
    <label class="block mb-2 font-bold"> Coba Chart </label>

    <client-only>
      <BarChart :data="chartData" />
    </client-only>
  </div>
</template>

<script>
export default {
  props: {
    penilaian: {
      type: Object,
      required: true,
    },
  },
  computed: {
    chartData() {
      return {
        labels: [1, 2, 3, 4, 5],
        datasets: [
          {
            label: '',
            data: [2, 1, 16, 3, 2],
            backgroundColor: 'rgba(20, 255, 0, 0.3)',
            borderColor: 'rgba(100, 255, 0, 1)',
            borderWidth: 2,
          },
        ],
      }
    },
  },
}
</script>

Coba contoh component ini.

5. Hasilnya

Kurang lebih tampilannya seperti ini. Chart ini disebut BarChart, ada juga jenis chart lain di Chart JS. Untuk mengetahui lebih lanjut dan mempelajari tentang konfigurasi, kamu dapat lihat dokumentasinya di:

https://www.chartjs.org/docs/2.9.4/

Chart JS in Nuxt JS

Kamiswara Angga W. — Fri, 22 Jul 2022 09:37:00 +0000

Check out how I use Chart JS in Nuxt JS using vue-chartjs 3.5.1. By the way, I use Nuxt 2 with Vue 2 in it, and I use Tailwind CSS in my project. Make sure the Chart JS documentation that you open is version 2.9.4 because this tutorial tells you aboutu version 2.9.4.

1. Add these two dependencies to our package.json

{
  ...
  "dependencies": {
    "chart.js": "2.9.4",
    "vue-chartjs": "^3.5.1"
  }
  ...
}

Run yarn install or npm install

2. chart.js plugin file

Create a new file in the plugins folder in our Nuxt project, if the plugins folder doesn't exist yet, just create it. This new file can be given any name, but we will name it chart.js.

The content of the chart.js file:

import Vue from 'vue'
import { Bar } from 'vue-chartjs'

Vue.component('BarChart', {
  extends: Bar,
  props: {
    data: {
      type: Object,
      required: true,
    },
    options: {
      type: Object,
      required: false,
      default: () => ({
        responsive: true,
        maintainAspectRatio: false,
        legend: {
          display: false,
        },
      }),
    },
  },
  watch: {
    data() {
      this.renderChart(this.data, this.options)
    },
  },
  mounted() {
    this.renderChart(this.data, this.options)
  },
})

3. nuxt.config.js

export default {
  ...
  plugins: ['@/plugins/chart.js'],
  ...
}

Add the chart.js plugin to the nuxt.config.js file in the plugins property.

4. Create the component

<template>
  <div class="p-2 border border-gray-500 mt-4">
    <label class="block mb-2 font-bold"> Coba Chart </label>

    <client-only>
      <BarChart :data="chartData" />
    </client-only>
  </div>
</template>

<script>
export default {
  props: {
    penilaian: {
      type: Object,
      required: true,
    },
  },
  computed: {
    chartData() {
      return {
        labels: [1, 2, 3, 4, 5],
        datasets: [
          {
            label: '',
            data: [2, 1, 16, 3, 2],
            backgroundColor: 'rgba(20, 255, 0, 0.3)',
            borderColor: 'rgba(100, 255, 0, 1)',
            borderWidth: 2,
          },
        ],
      }
    },
  },
}
</script>

Try this example component.

5. The result

More or less it looks like this. This chart is called BarChart, there are also other types of charts in Chart JS. To know more and learn about the configuration, you can check the documentation:

https://www.chartjs.org/docs/2.9.4/

Deploy Nuxt to Vercel

Kamiswara Angga W. — Mon, 31 Jan 2022 19:22:39 +0000

Having trouble deploying Nuxt JS application to Vercel? Yes, me too. Here's how I deploy Nuxt JS to Vercel. This method is still running on February 1, 2022. Maybe in the future the method of deploying Nuxt applications on Vercel will change and this method can no longer be used.

1. Create a file called vercel.json in the project root

This is the contents of the code from the vercel.json file:

{
  "version": 2,
  "builds": [
    {
      "src": "nuxt.config.js",
      "use": "@nuxtjs/vercel-builder"
    }
  ]
}

2. Login to Vercel, then click New Project

After logging in, you will be redirected to a kind of dashboard page. Click the New Project button to create a new project.

3. Import project from Git repo

Find your project and click Import. I think this is the easiest way to import our project.

4. Configure Project

Vercel can automatically detect what technology / framework we are using in FRAMEWORK PRESET. In the Configure Project section, click Build and Output Settings.

5. Build & Development Settings

Change OUTPUT DIRECTORY to .nuxt/dist by clicking OVERRIDE on the right.

6. If you prefer yarn

If you prefer to use yarn, change it to something like this. Click Save, and you're done. Just wait, later your application can be accessed via the URL provided. Usually it will be quick or takes at most 24 hours.

7. That's all

Deploying for free on Vercel is useful for testing our application or just want to show our client the appearance or UI.

Thanks for reading.

Deploy Nuxt ke Vercel

Kamiswara Angga W. — Mon, 31 Jan 2022 19:10:26 +0000

Mengalami masalah ketika deploy aplikasi Nuxt JS ke Vercel? Ya, saya juga. Berikut ini cara saya deploy Nuxt JS ke Vercel. Cara ini masih jalan pada 1 Februari 2022. Mungkin di masa depan cara deploy aplikasi Nuxt di Vercel akan berubah dan cara ini sudah tidak bisa dipakai lagi.

1. Bikin file bernama vercel.json di root project

Ini isi code dari file vercel.json:

{
  "version": 2,
  "builds": [
    {
      "src": "nuxt.config.js",
      "use": "@nuxtjs/vercel-builder"
    }
  ]
}

2. Login di Vercel, lalu klik New Project

Setelah login, maka kamu akan diarahkan ke semacam halaman dashboard. Klik tombol New Project untuk bikin project baru.

3. Import project dari Git repo

Cari project-mu dan klik Import. Menurut saya ini adalah cara paling mudah untuk import project kita.

4. Configure Project

Vercel bisa otomatis mendeteksi teknologi / framework apa yang kita gunakan di FRAMEWORK PRESET. Di bagian Configure Project, klik Build and Output Settings.

5. Build & Development Settings

Ganti OUTPUT DIRECTORY jadi .nuxt/dist dengan cara
klik OVERRIDE di sebelah kanan.

6. Jika kamu lebih suka yarn

Kalau kamu lebih suka pakai yarn, ubah jadi seperti ini. Klik Save, dan selesai. Tunggu saja, nanti aplikasimu dapat diakses melalui URL yang tersedia. Biasanya butuh waktu cepat atau paling lama 24 jam.

7. Sekian

Deploy secara gratis di Vercel bermanfaat buat testing aplikasi kita atau sekedar pengen nunjukkin ke client mengenai tampilan / UI website yang udah jadi.

Terimakasih sudah membaca.

Set Up Tailwind CSS di Project HTML Biasa

Kamiswara Angga W. — Sun, 07 Nov 2021 06:53:06 +0000

Sebenarnya di situs web Tailwind CSS sudah ada dokumentasi tentang beberapa cara untuk menginstal tailwind css. Namun saya menemukan dokumentasinya terlalu panjang dan agak membingungkan. Jadi saya memutuskan untuk membuat tutorial saya sendiri. Saya harap catatan saya dapat bermanfaat bagi kamu juga.

1. Bikin file css

Pertama bikin file css dulu terserah namanya apa saja. Dalam hal ini saya beri nama global.css. Lokasi dari file ini juga terserah. Dalam hal ini biasanya saya taruh di folder /assets/css/.

/* global.css */

@tailwind base;
@tailwind components;
@tailwind utilities;

@apply directives juga bisa ditaruh di file ini.

Di root folder project kita, jalankan perintah ini. Fungsinya untuk mengubah file global.css tadi menjadi file tailwind.css. Nantinya file tailwind.css yang dipanggil di file html kita, bukan global.css.

npx tailwindcss -i ./html/assets/css/global.css -o ./html/assets/css/tailwind.css

Setiap kali global.css berubah, perintah ini harus dijalankan lagi.

Sebenarnya ada perintah watch dengan menambahkan -w di akhir perintah ini. Tapi saya tidak tahu kenapa, laptop saya membeku ketika saya menggunakan perintah -w. Meskipun ini adalah laptop Core i5 dan dengan memori 16 GB. Laptop teman saya juga mengalami hal yang sama. Itu sebabnya saya tidak pernah menggunakan perintah -w lagi.

Sebenarnya perintah watch ini berguna untuk membangun file tailwind.css secara otomatis setiap kali file global.css berubah. Tapi karena ada masalah sebelumnya, jadi saya tidak pernah menggunakannya.

3. Menggunakan tailwind.config.js

File tailwind.config.js juga dapat digunakan dalam proyek html biasa seperti ini. Buat saja file dengan mengetikkan perintah di bawah ini di root folder project kita.

npx tailwindcss init

File ini akan otomatis terdeteksi saat menjalankan perintah convert tadi (perintah npx sebelumnya). Biasanya saya menjalankan perintah convert di root project.

4. Panggil file tailwind.css di file html kita

Kamu bisa panggil file tailwind.css tadi dengan cara seperti ini:

<link rel="stylesheet" href="./assets/css/tailwind.css" />

Penutup

Catatan: npx akan ada satu paket dengan npm versi 5.2 ke atas.

Set Up Regular HTML Project with Tailwind CSS

Kamiswara Angga W. — Sun, 07 Nov 2021 06:07:17 +0000

Actually on the Tailwind CSS website there is already documentation on several ways to install tailwind css. However I find the documentation too long and a bit confusing. So I decided to make my own tutorial. I hope my notes can be useful for you too.

1. Create the css file

First create a css file, whatever the name is. In this case I named it global.css. The location of this file is also up to you. In this case I usually put it in the /assets/css/ folder.

/* global.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

@apply directives can also be put in this file.

2. Convert the css file into tailwind.css

In the root of our project folder, run this command to convert the global.css file into a tailwind.css file. Later the tailwind.css file is called in our html file, not the global.css.

npx tailwindcss -i ./html/assets/css/global.css -o ./html/assets/css/tailwind.css

Whenever global.css changes, this command must be run again.

Actually there is a watch command by adding -w at the end of this command. But I don't know why, my laptop freeze when I use the -w command. Even though it is a Core i5 laptop and with 16 GB memory. My friend's laptop also experienced the same thing. That's why I never use the -w command again.

Actually this watch command is useful to build tailwind.css file automatically whenever global.css file changes. But because there was a problem, so I never used it.

3. Using the tailwind.config.js

The tailwind.config.js file can also be used in a regular html project like this one. Just make the file by typing the command below in the root of our project folder.

npx tailwindcss init

This file will be automatically detected when running the convert command earlier (previous npx command). Usually I run the convert command in the project root.

4. Call the tailwind.css file in our html file

You can call the tailwind.css file in the html file, like this:

<link rel="stylesheet" href="./assets/css/tailwind.css" />

Done

Note: npx is included with npm version 5.2 and above.