➕ tailwindcssを導入

NiXieePlus · Jun 30, 2021 · ec799a3 · ec799a3
1 parent ffc1f06
commit ec799a3
Show file tree

Hide file tree

Showing 10 changed files with 445 additions and 20 deletions.
diff --git a/next-env.d.ts b/next-env.d.ts
@@ -1,2 +1,3 @@
 /// <reference types="next" />
 /// <reference types="next/types/global" />
+/// <reference types="next/image-types/global" />
diff --git a/package.json b/package.json
@@ -15,8 +15,11 @@
   },
   "devDependencies": {
     "@types/react": "17.0.11",
+    "autoprefixer": "^10.2.6",
     "eslint": "7.29.0",
     "eslint-config-next": "11.0.1",
+    "postcss": "^8.3.5",
+    "tailwindcss": "^2.2.4",
     "typescript": "4.3.4"
   }
 }
diff --git a/postcss.config.js b/postcss.config.js
@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}
diff --git a/pages/_app.tsx → src/pages/_app.tsx b/pages/_app.tsx → src/pages/_app.tsx
@@ -1,5 +1,5 @@
-import '../styles/globals.css'
 import type { AppProps } from 'next/app'
+import 'tailwindcss/tailwind.css'
 
 function MyApp({ Component, pageProps }: AppProps) {
   return <Component {...pageProps} />

diff --git a/pages/api/hello.ts → src/pages/api/hello.ts b/pages/api/hello.ts → src/pages/api/hello.ts
diff --git a/pages/index.tsx → src/pages/index.tsx b/pages/index.tsx → src/pages/index.tsx
diff --git a/styles/Home.module.css → src/styles/Home.module.css b/styles/Home.module.css → src/styles/Home.module.css
diff --git a/styles/globals.css → src/styles/globals.css b/styles/globals.css → src/styles/globals.css
diff --git a/tailwind.config.js b/tailwind.config.js
@@ -0,0 +1,11 @@
+module.exports = {
+  purge: ['./src/**/*.{js,ts,jsx,tsx}'],
+  darkMode: false, // or 'media' or 'class'
+  theme: {
+    extend: {},
+  },
+  variants: {
+    extend: {},
+  },
+  plugins: [],
+}
diff --git a/yarn.lock b/yarn.lock