Theme Toggle in Astro 5 + Tailwind 4

Gustavo Perez — Thu, 20 Mar 2025 12:57:19 +0000

For this project we will be using npm for package management. You can follow this steps to create a minimal Astro 5 with Tailwind CSS 4 project and implement a basic theme toggle button.

Prerequisites:

NodeJs installed
Code editor download here

1. Create a new Astro project

  # Create a new project with npm
  npm create astro@latest my-astro-project

If you don't have installed create astro just accept the installation. During the initial setup, select the options you prefer (generally "Empty" is a good option to start with).

Navigate to the project directory

  cd my-astro-project

2. Install Tailwind CSS 4

Install Tailwind CSS based on the integration with astro in tailwindcss docs you can check here:

  npm install tailwindcss @tailwindcss/vite

3. Configure Tailwind CSS for Astro

Modify the atro.config.mjs file:

  import { defineConfig } from "astro/config";
  // add this line
  import tailwindcss from "@tailwindcss/vite";

  export default defineConfig({
    // add this code
    vite: {
      plugins: [tailwindcss()],
    },
    // add this code
  });

4. Create the global CSS file

Create a file at src/styles/global.css with the following content:

  @tailwindcss;

  /* Create a custom Tailwind variant for dark mode.
   * It applies styles when .dark is present on the element.
   * :where(.dark, .dark *) ensures low specificity for better overrides.
  */
  @custom-variant dark (&:where(.dark, .dark *));

5. Add content to index

Modify the src/pages/index.astro file with this content:

  ---

  ---

  <html lang="en">
    <head>
      <meta charset="utf-8" />
      <meta name="viewport" content="width=device-width, initial-scale=1" />
      <title>My Astro Theme Toggle</title>
    </head>
    <body class="transition-colors duration-300 bg-white text-black dark:bg-gray-900 dark:text-white">
      <div class="container mx-auto p-4 flex items-center justify-center">
        <h1 class="text-2xl font-bold mb-4">Astro Site + Tailwind</h1>

        <button 
          id="theme-toggle" 
          class="px-4 py-2 bg-gray-200 dark:bg-gray-700 rounded-md"
        >
          Toggle Theme
        </button>

        <div class="mt-8">
          <p>More content...</p>
        </div>
      </div>

      <script>
        // Simple script to toggle the theme
        document.getElementById('theme-toggle')?.addEventListener('click', () => {
          document.body.classList.toggle('dark');
        });
      </script>
    </body>
  </html>

6. Run the development server

  npm run dev

This will start the Astro development server. Navigate to http://localhost:4321 in your browser to see your site and test the theme toggle button.

Java Foundation

Gustavo Perez — Thu, 09 Jan 2025 20:29:01 +0000

What is Java

Java is a high-level, object-oriented, and platform-independent programming language. It is widely used for building web applications, mobile applications, enterprise software, and more. Its "write once, run anywhere" capability is powered by the Java Virtual Machine (JVM).

Key Characteristics of Java

Platform Independence: Code written in Java can run on any platform with a JVM.
Object-Oriented: It uses concepts like classes, inheritance, and polymorphism to structure programs.
Robustness: Strong memory management and exception handling make Java less prone to crashes.
Security: Features like a security manager and bytecode verification ensure secure execution.
Multithreading: Java supports concurrent programming to run multiple tasks simultaneously.
Rich Libraries: Extensive standard libraries for networking, file handling, and more.

JVM (Java Virtual Machine)

The JVM is a runtime environment that executes Java bytecode, making Java platform-independent. It interprets or compiles bytecode into machine code specific to the host system. It also handles memory management, garbage collection, and security checks.

JDK (Java Development Kit)

The JDK is a software development environment that provides tools for developing, debugging, and running Java applications. It includes the Java Compiler (javac), libraries, and the JRE (Java Runtime Environment).

Java Compiler (javac) and How It Works

The javac compiler translates Java source code (files with .java extension) into bytecode (files with .class extension). Bytecode is an intermediate, platform-independent representation of the program, which is then executed by the JVM.

JRE (Java Runtime Environment)

The JRE provides the libraries, JVM, and other components necessary to run Java applications. It does not include development tools like the compiler. It is intended solely for end-users who want to execute Java programs.

Variables

In Java, a variable is a container for storing data that can be used and manipulated within a program. Each variable has a type that defines the kind of data it can hold.

Example:

int age = 25; // An integer variable
String name = "John"; // A string variable

Data Types

Data types define the type of data that a variable can store. Java is statically typed, so each variable must be declared with a data type.

Common Data Types:

Primitive: int, double, boolean, char, etc.
Non-Primitive: String, arrays, objects, etc.

Example:

int number = 10; // Integer
double price = 19.99; // Decimal number
boolean isAvailable = true; // Boolean
char grade = 'A'; // Character

Concatenation

Concatenation in Java is the process of joining two or more strings or combining strings with other data types. The + operator is commonly used for this purpose.

Example:

String firstName = "Jane";
String lastName = "Doe";
String fullName = firstName + " " + lastName; // "Jane Doe"

int age = 30;
String message = "Age: " + age; // "Age: 30"

Constants

Constants are variables whose values cannot be changed once assigned. In Java, the final keyword is used to declare constants.

Example:

final double PI = 3.14159;
final String WELCOME_MESSAGE = "Welcome to Java Programming";

// Uncommenting the line below will cause an error
// PI = 3.14;

Summary Example

public class Main {
    public static void main(String[] args) {
        // Variables and Data Types
        int age = 25;
        double height = 5.9;
        String name = "Alice";
        boolean isStudent = true;

        // Concatenation
        String message = name + " is " + age + " years old.";
        System.out.println(message); // Output: Alice is 25 years old.

        // Constants
        final double GRAVITY = 9.8;
        System.out.println("Gravity: " + GRAVITY); // Output: Gravity: 9.8
    }
}

Forem: Gustavo Perez

Theme Toggle in Astro 5 + Tailwind 4

1. Create a new Astro project

2. Install Tailwind CSS 4

3. Configure Tailwind CSS for Astro

4. Create the global CSS file

5. Add content to index

6. Run the development server

Java Foundation

What is Java

Key Characteristics of Java

JVM (Java Virtual Machine)

JDK (Java Development Kit)

Java Compiler (javac) and How It Works

JRE (Java Runtime Environment)

Variables

Data Types

Common Data Types:

Concatenation

Constants

Summary Example