Shotaro Nakamura

Freshで、Tailwind v3を使う方法

デフォルトだと、Freshは、Tailwind v2を使っている。これは、Twind v0を使っているからだ。

Twind v1にアップデートすることで、Tailwind v3を使うことができる。

Steps

まず、./main.tsを以下のように書き換える。

import twindPlugin from "$fresh/plugins/twind.ts"; // Old
import twindPlugin from "$fresh/plugins/twindv1.ts"; // New

次に、./twind.config.tsを以下のように書き換える。

import { Options } from "$fresh/plugins/twind.ts"; // Old
import { Options } from "$fresh/plugins/twindv1.ts"; // New

import { defineConfig, Preset } from "https://esm.sh/@twind/core@1.1.3"; // New
import presetTailwind from "https://esm.sh/@twind/preset-tailwind@1.1.4"; // New, 現時点で1.1.4が最新

export default {
  ...defineConfig({
    presets: [presetTailwind() as Preset],
  }),
  selfURL: import.meta.url,
} as Options;

これでOK!

CommentEdit1 Like

開発中自作ゲームエンジン「KaguraJS」

小6から中1の初めのときくらいに作ってたやつをTypeScript/ESMで再実装中
https://nakasyou.github.io/KaguraJS/

import { Kagura, Sprite, Scene, Asset, type SceneConstructorOptions } from "kagurajs"

class MyScene extends Scene{
  gobo: Sprite
  speed?: number
  constructor (sceneConstructorOptions: SceneConstructorOptions) {
    super(sceneConstructorOptions)
    this.gobo = {} as Sprite
  }
  async init(){
    this.gobo = await new Sprite().init({
      asset: await new Asset().fromURL("./gobo.svg")
    })
    this.gobo.x = 100
    this.addChild(this.gobo)
  }
  async frame(){
    this.gobo.x ++
  }
}

const kagura = new Kagura({
  element: document.getElementById("game") as HTMLCanvasElement,
  startScene: MyScene,
})
await kagura.start()
CommentEdit1 Like

Hello

なんか面白そう

CommentEdit1 Like