diff --git a/learn/src/components/TouchMain.module.css b/learn/src/components/TouchMain.module.css
deleted file mode 100644
index 331753e7..00000000
--- a/learn/src/components/TouchMain.module.css
+++ /dev/null
@@ -1,160 +0,0 @@
-.wrapper {
-  background-color: white;
-}
-.show_chart {
-  margin-top: auto;
-  margin-bottom: auto;
-  float: left;
-  margin-top: 150px;
-  width: 60%;
-}
-
-.hide_chart {
-  float: left;
-  margin-top: 150px;
-  width: 90%;
-}
-
-.question {
-  padding-top: 8px;
-  padding-bottom: 6px;
-  max-width: 100%;
-  width: 800px;
-  margin-top: auto;
-  margin-left: auto;
-  margin-right: auto;
-  font-weight: bold;
-  font-family: sans-serif;
-  font-size: 40px;
-}
-
-.touch_field {
-  padding-top: 8px;
-  padding-bottom: 6px;
-  max-width: 100%;
-  width: 800px;
-  margin-left: auto;
-  margin-right: auto;
-}
-
-.judge_and_next_question {
-  height: 60px;
-  max-width: 100%;
-  width: 800px;
-  margin-left: auto;
-  margin-right: auto;
-  display: flex;
-}
-
-.judge {
-  flex-basis: 60%;
-  display: flex;
-}
-
-.judge_icon {
-  padding-left: 20px;
-  margin-top: auto;
-  margin-bottom: auto;
-  font-size: 60px;
-}
-
-.right_icon {
-  color: rgba(130, 211, 102, 1);
-}
-
-.wrong_icon {
-  color: rgba(228, 99, 99, 1);
-}
-
-.judge_text {
-  padding-left: 10px;
-  margin-top: auto;
-  margin-bottom: auto;
-  font-family: sans-serif;
-  font-size: 36px;
-  font-weight: bold;
-}
-
-.next_question {
-  display: flex;
-  justify-content: center;
-  flex-basis: 40%;
-}
-
-.btn {
-  border-radius: 0.5rem;
-  color: white;
-  border-top: none;
-  border-left: none;
-  transition: 0.3s;
-  -webkit-box-shadow: 0 3px 5px rgba(0, 0, 0, 0.3);
-  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.3);
-
-  width: 200px;
-  height: 60px;
-  font-family: sans-serif;
-  font-size: 24px;
-  font-weight: bold;
-}
-
-.btn:hover {
-  margin-top: 3px;
-  margin-left: 3px;
-}
-
-.judge_btn {
-  background-color: rgba(96, 188, 255, 1);
-  border-bottom: 5px solid rgba(4, 138, 235, 1);
-  border-right: 5px solid rgba(4, 138, 235, 1);
-}
-
-.judge_btn:hover {
-  border-bottom: 2px solid rgba(4, 138, 235, 1);
-  border-right: 2px solid rgba(4, 138, 235, 1);
-}
-
-.right_next_btn {
-  background-color: rgba(130, 211, 102, 1);
-  border-bottom: 5px solid rgba(99, 155, 79, 1);
-  border-right: 5px solid rgba(99, 155, 79, 1);
-}
-
-.right_next_btn:hover {
-  border-bottom: 2px solid rgba(99, 155, 79, 1);
-  border-right: 2px solid rgba(99, 155, 79, 1);
-}
-
-.wrong_next_btn {
-  background-color: rgba(228, 99, 99, 1);
-  border-bottom: 5px solid rgba(155, 79, 79, 1);
-  border-right: 5px solid rgba(155, 79, 79, 1);
-}
-
-.wrong_next_btn:hover {
-  border-bottom: 2px solid rgba(155, 79, 79, 1);
-  border-right: 2px solid rgba(155, 79, 79, 1);
-}
-
-.chart {
-  /* display: inline-block; */
-  float: left;
-  left: 60%;
-  width: 40%;
-  height: 600px;
-  overflow: auto;
-}
-
-.hidden_chart {
-  /* display: inline-block; */
-  float: left;
-  position: fixed;
-  left: 100%;
-  width: 40%;
-  height: 600px;
-  overflow: auto;
-}
-
-.chart_btn {
-  position: fixed;
-  left: 90%;
-}
diff --git a/learn/src/components/TouchMain.tsx b/learn/src/components/TouchMain.tsx
index 74e6860a..bb1e5e09 100644
--- a/learn/src/components/TouchMain.tsx
+++ b/learn/src/components/TouchMain.tsx
@@ -6,7 +6,6 @@ import CheckCircleOutlineIcon from "@mui/icons-material/CheckCircleOutline";
 import CancelOutlinedIcon from "@mui/icons-material/CancelOutlined";
 import * as tenji from "tenji";
 import { BrailleArray } from "braille";
-import styles from "./TouchMain.module.css";
 import HiraganaTableDialog from "./HiraganaTableDialog";
 
 export default function TouchMain({
@@ -46,62 +45,62 @@ export default function TouchMain({
 
   return (
     <>
-      <div className={showBrailleChart ? styles.show_chart : styles.hide_chart}>
-        <div className={styles.question}>
+      <div
+        className={`float-left mb-auto mt-40 ${showBrailleChart ? "w-3/4" : "w-full"}`}
+      >
+        <div className="w-200 mx-auto mt-auto max-w-full pb-1.5 pt-2 font-sans text-3xl font-bold">
           「{question}」を点字に直してください。
         </div>
-        <div className={styles.touch_field}>
+        <div className="w-200 mx-auto flex max-w-full pb-1.5 pt-2">
           {brailleStrings.map((brailleChar, i) => (
-            <EdittableBraille
-              key={i}
-              height="150"
-              width="90"
-              braille={brailleChar}
-              setBraille={(braille) => {
-                setBrailleStrings(
-                  new BrailleArray(
-                    brailleStrings.map((_, j) => (j === i ? braille : _)),
-                  ),
-                );
-              }}
-            />
+            <div>
+              <EdittableBraille
+                key={i}
+                height="150"
+                width="90"
+                braille={brailleChar}
+                setBraille={(braille) => {
+                  setBrailleStrings(
+                    new BrailleArray(
+                      brailleStrings.map((_, j) => (j === i ? braille : _)),
+                    ),
+                  );
+                }}
+              />
+            </div>
           ))}
         </div>
 
-        <div className={styles.judge_and_next_question}>
+        <div className="w-200 mx-auto flex h-60 max-w-full">
           {(() => {
             if (afterJudgeAnswer === true && rightOrWrong === true) {
               return (
-                <div className={styles.judge}>
-                  <CheckCircleOutlineIcon
-                    className={`${styles.judge_icon} ${styles.right_icon}`}
-                  />
-                  <p className={styles.judge_text}>正解!!</p>
+                <div className="flex basis-3/4">
+                  <CheckCircleOutlineIcon className="my-auto bg-green-500 pl-5 text-6xl" />
+                  <p className="my-auto pl-2.5 font-sans text-3xl font-bold">
+                    正解!!
+                  </p>
                 </div>
               );
             }
             if (afterJudgeAnswer === true && rightOrWrong === false) {
               return (
-                <div className={styles.judge}>
-                  <CancelOutlinedIcon
-                    className={`${styles.judge_icon} ${styles.wrong_icon}`}
-                  />
-                  <p className={styles.judge_text}>不正解</p>
+                <div className="flex basis-3/4">
+                  <CancelOutlinedIcon className="my-auto bg-red-500 pl-5 text-6xl" />
+                  <p className="my-auto pl-2.5 font-sans text-3xl font-bold">
+                    不正解
+                  </p>
                 </div>
               );
             }
-            return <div className={styles.judge}> </div>;
+            return <div className="flex basis-3/4"> </div>;
           })()}
           {(() => {
             if (afterJudgeAnswer === true) {
               return (
-                <div className={styles.next_question}>
+                <div className="flex basis-10 justify-center">
                   <button
-                    className={
-                      rightOrWrong
-                        ? `${styles.btn} ${styles.right_next_btn}`
-                        : `${styles.btn}  ${styles.wrong_next_btn}`
-                    }
+                    // className={`rounded-md text-white border-t-0 border-l-0 transition duration-300 shadow-md hover:shadow-lg w-48 h-16 font-bold font-sans text-lg`}
                     type="button"
                     onClick={() => {
                       setQuestion(makeQuestion(typeOfQuestions));
@@ -121,9 +120,9 @@ export default function TouchMain({
               );
             }
             return (
-              <div className={styles.next_question}>
+              <div className="flex basis-10 justify-center">
                 <button
-                  className={`${styles.btn} ${styles.judge_btn}`}
+                  className="btn judge_btn"
                   type="button"
                   onClick={() => {
                     judgeAnswer(
@@ -141,11 +140,13 @@ export default function TouchMain({
           })()}
         </div>
       </div>
-      <div className={showBrailleChart ? styles.chart : styles.hidden_chart}>
+      <div
+        className={`${showBrailleChart ? "left-3/4" : "fixed left-full"} h-150 float-left w-1/4 overflow-auto`}
+      >
         <HiraganaTableDialog />
       </div>
       <button
-        className={styles.chart_btn}
+        className="fixed right-10"
         type="button"
         onClick={() => {
           setShowBrailleChart(!showBrailleChart);
diff --git a/learn/tailwind.config.js b/learn/tailwind.config.js
index 90246381..8384dbc1 100644
--- a/learn/tailwind.config.js
+++ b/learn/tailwind.config.js
@@ -2,7 +2,11 @@
 module.exports = {
   content: ["./src/**/*.{js,ts,jsx,tsx,mdx}"],
   theme: {
-    extend: {},
+    extend: {
+      width: {
+        200: "50rem",
+      },
+    },
   },
   plugins: [],
 };