├── .editorconfig ├── .github ├── dependabot.yml └── workflows │ └── ci.yml ├── .gitignore ├── .vscode ├── extensions.json └── settings.json ├── LICENSE ├── README.md ├── VERSIONING_POLICY.md ├── package.json └── src ├── 第3章_Tailwind_CSSを導入する ├── gulpfile.js ├── package.json ├── postcss.config.js ├── src │ ├── index.html │ └── main.css └── webpack.config.js ├── 第6章_Tailwind_CSSでコンポーネントを設計する ├── .eslintrc.cjs ├── .gitignore ├── README.md ├── components.json ├── index.html ├── package.json ├── postcss.config.js ├── public │ └── vite.svg ├── src │ ├── App.tsx │ ├── components │ │ ├── framer-motion │ │ │ └── AnimatedList.tsx │ │ ├── headlessui │ │ │ ├── MyDialog.tsx │ │ │ └── Transition.tsx │ │ ├── react-aria │ │ │ ├── Dialog.tsx │ │ │ ├── DialogWithComponent.tsx │ │ │ └── Popover.tsx │ │ ├── react-spring │ │ │ └── FadeIn.tsx │ │ └── ui │ │ │ ├── button.tsx │ │ │ └── card.tsx │ ├── index.css │ ├── lib │ │ └── utils.ts │ └── main.tsx ├── tailwind.config.js ├── tsconfig.json ├── tsconfig.node.json └── vite.config.ts ├── 第7章_Tailwind_CSSをカスタマイズする ├── 7_3_JavaScript_APIを利用する │ ├── extractClassNames.js │ ├── index.html │ ├── jest │ │ ├── jest.config.js │ │ └── preset.test.js │ ├── my-preset.js │ ├── tailwind.config.js │ └── vitest │ │ └── preset.test.js ├── 7_4_独自のプラグインを作成する │ ├── index.html │ ├── main.css │ ├── plugins │ │ ├── cssVariablePlugin.js │ │ ├── langPlugin.js │ │ └── trimmedTextPlugin.js │ ├── tailwind.config.js │ └── theme │ │ └── myColorTheme.js └── package.json └── 第8章_Tailwind_CSSを既存のプロジェクトに導入する ├── less ├── ng.less └── ok.less ├── package.json ├── run.sh ├── sass ├── ng.scss └── ok.scss └── stylus ├── ng.styl └── ok.styl /.editorconfig: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fsubal/gihyo_tailwindcss_book/HEAD/.editorconfig -------------------------------------------------------------------------------- /.github/dependabot.yml: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fsubal/gihyo_tailwindcss_book/HEAD/.github/dependabot.yml -------------------------------------------------------------------------------- /.github/workflows/ci.yml: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fsubal/gihyo_tailwindcss_book/HEAD/.github/workflows/ci.yml -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fsubal/gihyo_tailwindcss_book/HEAD/.gitignore -------------------------------------------------------------------------------- /.vscode/extensions.json: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fsubal/gihyo_tailwindcss_book/HEAD/.vscode/extensions.json -------------------------------------------------------------------------------- /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "editor.formatOnSave": true 3 | } 4 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fsubal/gihyo_tailwindcss_book/HEAD/LICENSE -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fsubal/gihyo_tailwindcss_book/HEAD/README.md -------------------------------------------------------------------------------- /VERSIONING_POLICY.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fsubal/gihyo_tailwindcss_book/HEAD/VERSIONING_POLICY.md -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fsubal/gihyo_tailwindcss_book/HEAD/package.json -------------------------------------------------------------------------------- /src/第3章_Tailwind_CSSを導入する/gulpfile.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fsubal/gihyo_tailwindcss_book/HEAD/src/第3章_Tailwind_CSSを導入する/gulpfile.js -------------------------------------------------------------------------------- /src/第3章_Tailwind_CSSを導入する/package.json: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fsubal/gihyo_tailwindcss_book/HEAD/src/第3章_Tailwind_CSSを導入する/package.json -------------------------------------------------------------------------------- /src/第3章_Tailwind_CSSを導入する/postcss.config.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fsubal/gihyo_tailwindcss_book/HEAD/src/第3章_Tailwind_CSSを導入する/postcss.config.js -------------------------------------------------------------------------------- /src/第3章_Tailwind_CSSを導入する/src/index.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fsubal/gihyo_tailwindcss_book/HEAD/src/第3章_Tailwind_CSSを導入する/src/index.html -------------------------------------------------------------------------------- /src/第3章_Tailwind_CSSを導入する/src/main.css: -------------------------------------------------------------------------------- 1 | @import "tailwindcss"; 2 | -------------------------------------------------------------------------------- /src/第3章_Tailwind_CSSを導入する/webpack.config.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fsubal/gihyo_tailwindcss_book/HEAD/src/第3章_Tailwind_CSSを導入する/webpack.config.js -------------------------------------------------------------------------------- /src/第6章_Tailwind_CSSでコンポーネントを設計する/.eslintrc.cjs: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fsubal/gihyo_tailwindcss_book/HEAD/src/第6章_Tailwind_CSSでコンポーネントを設計する/.eslintrc.cjs -------------------------------------------------------------------------------- /src/第6章_Tailwind_CSSでコンポーネントを設計する/.gitignore: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fsubal/gihyo_tailwindcss_book/HEAD/src/第6章_Tailwind_CSSでコンポーネントを設計する/.gitignore -------------------------------------------------------------------------------- /src/第6章_Tailwind_CSSでコンポーネントを設計する/README.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fsubal/gihyo_tailwindcss_book/HEAD/src/第6章_Tailwind_CSSでコンポーネントを設計する/README.md -------------------------------------------------------------------------------- /src/第6章_Tailwind_CSSでコンポーネントを設計する/components.json: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fsubal/gihyo_tailwindcss_book/HEAD/src/第6章_Tailwind_CSSでコンポーネントを設計する/components.json -------------------------------------------------------------------------------- /src/第6章_Tailwind_CSSでコンポーネントを設計する/index.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fsubal/gihyo_tailwindcss_book/HEAD/src/第6章_Tailwind_CSSでコンポーネントを設計する/index.html -------------------------------------------------------------------------------- /src/第6章_Tailwind_CSSでコンポーネントを設計する/package.json: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fsubal/gihyo_tailwindcss_book/HEAD/src/第6章_Tailwind_CSSでコンポーネントを設計する/package.json -------------------------------------------------------------------------------- /src/第6章_Tailwind_CSSでコンポーネントを設計する/postcss.config.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fsubal/gihyo_tailwindcss_book/HEAD/src/第6章_Tailwind_CSSでコンポーネントを設計する/postcss.config.js -------------------------------------------------------------------------------- /src/第6章_Tailwind_CSSでコンポーネントを設計する/public/vite.svg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fsubal/gihyo_tailwindcss_book/HEAD/src/第6章_Tailwind_CSSでコンポーネントを設計する/public/vite.svg -------------------------------------------------------------------------------- /src/第6章_Tailwind_CSSでコンポーネントを設計する/src/App.tsx: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fsubal/gihyo_tailwindcss_book/HEAD/src/第6章_Tailwind_CSSでコンポーネントを設計する/src/App.tsx -------------------------------------------------------------------------------- /src/第6章_Tailwind_CSSでコンポーネントを設計する/src/components/framer-motion/AnimatedList.tsx: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fsubal/gihyo_tailwindcss_book/HEAD/src/第6章_Tailwind_CSSでコンポーネントを設計する/src/components/framer-motion/AnimatedList.tsx -------------------------------------------------------------------------------- /src/第6章_Tailwind_CSSでコンポーネントを設計する/src/components/headlessui/MyDialog.tsx: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fsubal/gihyo_tailwindcss_book/HEAD/src/第6章_Tailwind_CSSでコンポーネントを設計する/src/components/headlessui/MyDialog.tsx -------------------------------------------------------------------------------- /src/第6章_Tailwind_CSSでコンポーネントを設計する/src/components/headlessui/Transition.tsx: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fsubal/gihyo_tailwindcss_book/HEAD/src/第6章_Tailwind_CSSでコンポーネントを設計する/src/components/headlessui/Transition.tsx -------------------------------------------------------------------------------- /src/第6章_Tailwind_CSSでコンポーネントを設計する/src/components/react-aria/Dialog.tsx: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fsubal/gihyo_tailwindcss_book/HEAD/src/第6章_Tailwind_CSSでコンポーネントを設計する/src/components/react-aria/Dialog.tsx -------------------------------------------------------------------------------- /src/第6章_Tailwind_CSSでコンポーネントを設計する/src/components/react-aria/DialogWithComponent.tsx: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fsubal/gihyo_tailwindcss_book/HEAD/src/第6章_Tailwind_CSSでコンポーネントを設計する/src/components/react-aria/DialogWithComponent.tsx -------------------------------------------------------------------------------- /src/第6章_Tailwind_CSSでコンポーネントを設計する/src/components/react-aria/Popover.tsx: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fsubal/gihyo_tailwindcss_book/HEAD/src/第6章_Tailwind_CSSでコンポーネントを設計する/src/components/react-aria/Popover.tsx -------------------------------------------------------------------------------- /src/第6章_Tailwind_CSSでコンポーネントを設計する/src/components/react-spring/FadeIn.tsx: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fsubal/gihyo_tailwindcss_book/HEAD/src/第6章_Tailwind_CSSでコンポーネントを設計する/src/components/react-spring/FadeIn.tsx -------------------------------------------------------------------------------- /src/第6章_Tailwind_CSSでコンポーネントを設計する/src/components/ui/button.tsx: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fsubal/gihyo_tailwindcss_book/HEAD/src/第6章_Tailwind_CSSでコンポーネントを設計する/src/components/ui/button.tsx -------------------------------------------------------------------------------- /src/第6章_Tailwind_CSSでコンポーネントを設計する/src/components/ui/card.tsx: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fsubal/gihyo_tailwindcss_book/HEAD/src/第6章_Tailwind_CSSでコンポーネントを設計する/src/components/ui/card.tsx -------------------------------------------------------------------------------- /src/第6章_Tailwind_CSSでコンポーネントを設計する/src/index.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fsubal/gihyo_tailwindcss_book/HEAD/src/第6章_Tailwind_CSSでコンポーネントを設計する/src/index.css -------------------------------------------------------------------------------- /src/第6章_Tailwind_CSSでコンポーネントを設計する/src/lib/utils.ts: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fsubal/gihyo_tailwindcss_book/HEAD/src/第6章_Tailwind_CSSでコンポーネントを設計する/src/lib/utils.ts -------------------------------------------------------------------------------- /src/第6章_Tailwind_CSSでコンポーネントを設計する/src/main.tsx: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fsubal/gihyo_tailwindcss_book/HEAD/src/第6章_Tailwind_CSSでコンポーネントを設計する/src/main.tsx -------------------------------------------------------------------------------- /src/第6章_Tailwind_CSSでコンポーネントを設計する/tailwind.config.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fsubal/gihyo_tailwindcss_book/HEAD/src/第6章_Tailwind_CSSでコンポーネントを設計する/tailwind.config.js -------------------------------------------------------------------------------- /src/第6章_Tailwind_CSSでコンポーネントを設計する/tsconfig.json: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fsubal/gihyo_tailwindcss_book/HEAD/src/第6章_Tailwind_CSSでコンポーネントを設計する/tsconfig.json -------------------------------------------------------------------------------- /src/第6章_Tailwind_CSSでコンポーネントを設計する/tsconfig.node.json: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fsubal/gihyo_tailwindcss_book/HEAD/src/第6章_Tailwind_CSSでコンポーネントを設計する/tsconfig.node.json -------------------------------------------------------------------------------- /src/第6章_Tailwind_CSSでコンポーネントを設計する/vite.config.ts: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fsubal/gihyo_tailwindcss_book/HEAD/src/第6章_Tailwind_CSSでコンポーネントを設計する/vite.config.ts -------------------------------------------------------------------------------- /src/第7章_Tailwind_CSSをカスタマイズする/7_3_JavaScript_APIを利用する/extractClassNames.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fsubal/gihyo_tailwindcss_book/HEAD/src/第7章_Tailwind_CSSをカスタマイズする/7_3_JavaScript_APIを利用する/extractClassNames.js -------------------------------------------------------------------------------- /src/第7章_Tailwind_CSSをカスタマイズする/7_3_JavaScript_APIを利用する/index.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fsubal/gihyo_tailwindcss_book/HEAD/src/第7章_Tailwind_CSSをカスタマイズする/7_3_JavaScript_APIを利用する/index.html -------------------------------------------------------------------------------- /src/第7章_Tailwind_CSSをカスタマイズする/7_3_JavaScript_APIを利用する/jest/jest.config.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fsubal/gihyo_tailwindcss_book/HEAD/src/第7章_Tailwind_CSSをカスタマイズする/7_3_JavaScript_APIを利用する/jest/jest.config.js -------------------------------------------------------------------------------- /src/第7章_Tailwind_CSSをカスタマイズする/7_3_JavaScript_APIを利用する/jest/preset.test.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fsubal/gihyo_tailwindcss_book/HEAD/src/第7章_Tailwind_CSSをカスタマイズする/7_3_JavaScript_APIを利用する/jest/preset.test.js -------------------------------------------------------------------------------- /src/第7章_Tailwind_CSSをカスタマイズする/7_3_JavaScript_APIを利用する/my-preset.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fsubal/gihyo_tailwindcss_book/HEAD/src/第7章_Tailwind_CSSをカスタマイズする/7_3_JavaScript_APIを利用する/my-preset.js -------------------------------------------------------------------------------- /src/第7章_Tailwind_CSSをカスタマイズする/7_3_JavaScript_APIを利用する/tailwind.config.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fsubal/gihyo_tailwindcss_book/HEAD/src/第7章_Tailwind_CSSをカスタマイズする/7_3_JavaScript_APIを利用する/tailwind.config.js -------------------------------------------------------------------------------- /src/第7章_Tailwind_CSSをカスタマイズする/7_3_JavaScript_APIを利用する/vitest/preset.test.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fsubal/gihyo_tailwindcss_book/HEAD/src/第7章_Tailwind_CSSをカスタマイズする/7_3_JavaScript_APIを利用する/vitest/preset.test.js -------------------------------------------------------------------------------- /src/第7章_Tailwind_CSSをカスタマイズする/7_4_独自のプラグインを作成する/index.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fsubal/gihyo_tailwindcss_book/HEAD/src/第7章_Tailwind_CSSをカスタマイズする/7_4_独自のプラグインを作成する/index.html -------------------------------------------------------------------------------- /src/第7章_Tailwind_CSSをカスタマイズする/7_4_独自のプラグインを作成する/main.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fsubal/gihyo_tailwindcss_book/HEAD/src/第7章_Tailwind_CSSをカスタマイズする/7_4_独自のプラグインを作成する/main.css -------------------------------------------------------------------------------- /src/第7章_Tailwind_CSSをカスタマイズする/7_4_独自のプラグインを作成する/plugins/cssVariablePlugin.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fsubal/gihyo_tailwindcss_book/HEAD/src/第7章_Tailwind_CSSをカスタマイズする/7_4_独自のプラグインを作成する/plugins/cssVariablePlugin.js -------------------------------------------------------------------------------- /src/第7章_Tailwind_CSSをカスタマイズする/7_4_独自のプラグインを作成する/plugins/langPlugin.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fsubal/gihyo_tailwindcss_book/HEAD/src/第7章_Tailwind_CSSをカスタマイズする/7_4_独自のプラグインを作成する/plugins/langPlugin.js -------------------------------------------------------------------------------- /src/第7章_Tailwind_CSSをカスタマイズする/7_4_独自のプラグインを作成する/plugins/trimmedTextPlugin.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fsubal/gihyo_tailwindcss_book/HEAD/src/第7章_Tailwind_CSSをカスタマイズする/7_4_独自のプラグインを作成する/plugins/trimmedTextPlugin.js -------------------------------------------------------------------------------- /src/第7章_Tailwind_CSSをカスタマイズする/7_4_独自のプラグインを作成する/tailwind.config.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fsubal/gihyo_tailwindcss_book/HEAD/src/第7章_Tailwind_CSSをカスタマイズする/7_4_独自のプラグインを作成する/tailwind.config.js -------------------------------------------------------------------------------- /src/第7章_Tailwind_CSSをカスタマイズする/7_4_独自のプラグインを作成する/theme/myColorTheme.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fsubal/gihyo_tailwindcss_book/HEAD/src/第7章_Tailwind_CSSをカスタマイズする/7_4_独自のプラグインを作成する/theme/myColorTheme.js -------------------------------------------------------------------------------- /src/第7章_Tailwind_CSSをカスタマイズする/package.json: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fsubal/gihyo_tailwindcss_book/HEAD/src/第7章_Tailwind_CSSをカスタマイズする/package.json -------------------------------------------------------------------------------- /src/第8章_Tailwind_CSSを既存のプロジェクトに導入する/less/ng.less: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fsubal/gihyo_tailwindcss_book/HEAD/src/第8章_Tailwind_CSSを既存のプロジェクトに導入する/less/ng.less -------------------------------------------------------------------------------- /src/第8章_Tailwind_CSSを既存のプロジェクトに導入する/less/ok.less: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fsubal/gihyo_tailwindcss_book/HEAD/src/第8章_Tailwind_CSSを既存のプロジェクトに導入する/less/ok.less -------------------------------------------------------------------------------- /src/第8章_Tailwind_CSSを既存のプロジェクトに導入する/package.json: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fsubal/gihyo_tailwindcss_book/HEAD/src/第8章_Tailwind_CSSを既存のプロジェクトに導入する/package.json -------------------------------------------------------------------------------- /src/第8章_Tailwind_CSSを既存のプロジェクトに導入する/run.sh: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fsubal/gihyo_tailwindcss_book/HEAD/src/第8章_Tailwind_CSSを既存のプロジェクトに導入する/run.sh -------------------------------------------------------------------------------- /src/第8章_Tailwind_CSSを既存のプロジェクトに導入する/sass/ng.scss: -------------------------------------------------------------------------------- 1 | .alert { 2 | /** ◎ 動作する */ 3 | @apply bg-red-500 !important; 4 | } 5 | -------------------------------------------------------------------------------- /src/第8章_Tailwind_CSSを既存のプロジェクトに導入する/sass/ok.scss: -------------------------------------------------------------------------------- 1 | .alert { 2 | /** ◎ 動作する */ 3 | @apply bg-red-500 #{!important}; 4 | } 5 | -------------------------------------------------------------------------------- /src/第8章_Tailwind_CSSを既存のプロジェクトに導入する/stylus/ng.styl: -------------------------------------------------------------------------------- 1 | .card 2 | @apply rounded-lg bg-white p-4 -------------------------------------------------------------------------------- /src/第8章_Tailwind_CSSを既存のプロジェクトに導入する/stylus/ok.styl: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fsubal/gihyo_tailwindcss_book/HEAD/src/第8章_Tailwind_CSSを既存のプロジェクトに導入する/stylus/ok.styl --------------------------------------------------------------------------------