$ npx create-next-app --example with-electron-typescript todoapp
$ cd todoapp

# 初期状態だとなぜか `electron-is-dev` の型定義が無いと言われてしまったので、インストールし直す……
$ npm install 

# 起動
$ npm run dev

$ npm install --save-dev @tsconfig/node12

// tsconfig.json

{
  "extends": "@tsconfig/node12/tsconfig.json",

  "compilerOptions": {
    "preserveConstEnums": true
  },

  "include": ["src/**/*"],
  "exclude": ["node_modules", "**/*.spec.ts"]
}

$ npm install tailwindcss@latest postcss@latest autoprefixer@latest
$ npx tailwindcss init -p

// tailwind.conf.js

module.exports = {
  purge: ["./pages/**/*.js", "./components/**/*.js"],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
};

// _app.js

import "tailwindcss/tailwind.css";

function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />;
}

export default MyApp;

// components/Container.tsx
import TodoList from "./TodoList";

const Container = () => (
  <div
    className="
    h-100
    w-full
    flex
    items-center
    justify-center
    bg-teal-lightest
    font-sans
  "
  >
    <TodoList />
  </div>
);

export default Container;

// components/TodoList.tsx

import TodoItem from './TodoItem'

const TodoList = () => (
  <div className="bg-white rounded shadow p-6 m-4 w-full lg:w-3/4 lg:max-w-lg">
    <div className="mb-4">
      <h1 className="text-grey-darkest">Todo List</h1>
      <div className="flex mt-4">
        <input className="shadow appearance-none border rounded w-full py-2 px-3 mr-4 text-grey-darker" placeholder="Add Todo" />
        <button className="flex-no-shrink p-2 border-2 rounded text-teal border-teal hover:text-white hover:bg-teal">Add</button>
      </div>
    </div>
    <div>
      <TodoItem />
    </div>
  </div>
)

export default TodoList

// components/TodoList.tsx

const TodoItem = () => (
  <div className="flex mb-4 items-center">
    <p className="w-full text-grey-darkest">
      Add another component to Tailwind Components
    </p>
    <button className="flex-no-shrink p-2 ml-4 mr-2 border-2 rounded hover:text-white text-green border-green hover:bg-green">
      Done
    </button>
    <button className="flex-no-shrink p-2 ml-2 border-2 rounded text-red border-red hover:text-white hover:bg-red">
      Remove
    </button>
  </div>
);

export default TodoItem

// pages/index.tsx
import Container from '../components/Container'

const IndexPage = () => {
  return (
    <Container/>
  )
}

export default IndexPage

// components/TodoList.tsx
import { useState } from 'react'
import TodoItem from './TodoItem'
import { v4 as uuidv4 } from "uuid";

function TodoList() {
  const [tasks, setTasks] = useState([
    {key: uuidv4(), name: 'サンプルだよ'}
  ])

  const [name, setName] = useState('')

  const handleChange = (e) => {
    setName(e.target.value)
  }

  const addTask = () => {
    const task = {
      key: uuidv4(),
      name
    }
    setTasks([
      ...tasks,
      task
    ])
  }

  const removeTask = (key: string) => {
    setTasks(tasks.filter(task => task.key !== key))
  }

  const taskList = () => tasks.map(task => (
    <TodoItem
      key={task.key}
      task={task}
      removeTask={removeTask}
    />
  ))


  return (
    <div className="bg-white rounded shadow p-6 m-4 w-full lg:w-3/4 lg:max-w-lg">
      <div className="mb-4">
        <h1 className="text-grey-darkest">Todo List</h1>
        <div className="flex mt-4">
          <input onChange={handleChange} className="shadow appearance-none border rounded w-full py-2 px-3 mr-4 text-grey-darker" placeholder="Add Todo" />
          <button onClick={addTask} className="flex-no-shrink p-2 border-2 rounded text-teal border-teal hover:text-white hover:bg-teal">Add</button>
        </div>
      </div>
      <div>
        {taskList()}
      </div>
    </div>
  )

}

export default TodoList

// TodoItem.tsx

import { Task } from '../interfaces/Task'

type Props = {
  task: Task
  removeTask: any
}

const TodoItem = ({ task, removeTask}: Props) => (
  <div className="flex mb-4 items-center">
    <p className="w-full text-grey-darkest">
      {task.name}
    </p>
    <button className="flex-no-shrink p-2 ml-4 mr-2 border-2 rounded hover:text-white text-green border-green hover:bg-green">
      Done
    </button>
    <button onClick={() => removeTask(task.key)}className="flex-no-shrink p-2 ml-2 border-2 rounded text-red border-red hover:text-white hover:bg-red">
      Remove
    </button>
  </div>
);

export default TodoItem

  if (isDev) {
    mainWindow.webContents.openDevTools();
  }