figma-make.md

Figma Make

When downloading a zip file from Figma Make you'll have a "working" React application. However a few things prevent it from actually being useful, we need to first of all make it properly use Tailwind. Why I'm writing these notes is because I chased this for a while without thinking of this and could not figure out why some Tailwind selectors did not exist.

devcontainer

I personally find it easier to use a devcontainer when working with Node etc based projects.

mkdir .devcontainer
touch .devcontainer/devcontainer.json

{
  "name": "node-dev",
  "image": "mcr.microsoft.com/devcontainers/base:bookworm",
  "features": {
    "ghcr.io/devcontainers/features/node:1": {
      "version": "lts"
    }
  }
}

Now inside your Devcontainer compatible editor (e.g. VSCode) you just re-open the project in a devcontainer and Node is already installed.

package.json

Find the scripts section and we're going to replace

"dev": "vite",

with the following

"dev": "vite --host 0.0.0.0 --port 5173",

reasoning, the default localhost only binds to actual localhost. The port is just something random I picked, change as you want. Inside a devcontainer localhost doesn't expose to the outside world.

vite.config.ts

Let's add the following to the top:

import tailwindcss from "@tailwindcss/vite";

change the defineConfig( to look like this:

export default defineConfig({
  plugins: [react(), tailwindcss()],

And now we can install Tailwind:

npm i @tailwindcss/vite tailwindcss

Now when we use npm run dev or npm run build Tailwind will actually work!

eslint.config.js

ESLint is practical to have inside a CI pipeline but does require a config.

npm i --save-dev eslint typescript-eslint

Usage

npx eslint

// eslint.config.js
// @ts-check
import eslint from '@eslint/js';
import { defineConfig } from 'eslint/config';
import globals from 'globals';
import tseslint from 'typescript-eslint';

export default defineConfig(
  { ignores: ['build/**', '**/*.min.js'] },
  eslint.configs.recommended,
  ...tseslint.configs.recommended,
  {
    files: ['scripts/**/*.mjs'],
    languageOptions: {
      globals: {
        ...globals.node,
      },
    },
  },
  {
    files: ['**/*.{ts,tsx}'],
    rules: {
      // '@typescript-eslint/no-unused-vars': 'off',
      // 'no-unused-vars': 'off',
    },
  },
);

tsconfig.json

To check for Typescript errors outside your editor (e.g. your CI pipeline) you can call the compiler directly but tell it to not compile code.

npx tsc --noEmit

{
  "compilerOptions": {
    "target": "ES2020",
    "useDefineForClassFields": true,
    "lib": [
      "DOM",
      "DOM.Iterable",
      "ES2020"
    ],
    "module": "ESNext",
    "moduleResolution": "bundler",
    "strict": true,
    "jsx": "react-jsx",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "esModuleInterop": false,
    "allowSyntheticDefaultImports": true,
    "forceConsistentCasingInFileNames": true,
    "noImplicitOverride": true,
    "noUnusedLocals": false,
    "noUnusedParameters": false,
    "noFallthroughCasesInSwitch": true,
    "allowImportingTsExtensions": false,
    "verbatimModuleSyntax": true,
    "skipLibCheck": true,
    "noEmit": true,
    "types": [
      "vite/client"
    ],
    "baseUrl": ".",
    "paths": {
      "@/*": [
        "./src/*"
      ]
    }
  },
  "include": [
    "src"
  ]
}