Merge pull request #105 from OUCC/ciffelia/pretter-plugin-tailwindcss

Tailwindのクラス名が保存時に自動でソートされるようにする

package.json

@@ -32,6 +32,7 @@
   "devDependencies": {
     "prettier": "^3.1.1",
     "prettier-plugin-astro": "^0.12.2",
+    "prettier-plugin-tailwindcss": "^0.5.9",
     "quicktype": "^23.0.80",
     "schema-dts": "^1.1.2",
     "ts-node": "^10.9.2"

prettier.config.js

@@ -2,7 +2,7 @@
 export default {
   semi: false,
   singleQuote: true,
-  plugins: ['prettier-plugin-astro'],
+  plugins: ['prettier-plugin-astro', 'prettier-plugin-tailwindcss'],
   overrides: [
     {
       files: '*.astro',

src/components/activity/DailyActivitySection.astro

@@ -8,7 +8,7 @@ import meetingImage from '@/assets/online_kaigi_woman.webp'
 <Section background="white">
   <Fragment slot="title">普段の活動</Fragment>
   <div class="flex flex-col items-center gap-8">
-    <div class="max-w-[32rem] flex flex-col gap-2.5">
+    <div class="flex max-w-[32rem] flex-col gap-2.5">
       <Image
         class="w-full"
         src={discordImage}
@@ -19,7 +19,7 @@ import meetingImage from '@/assets/online_kaigi_woman.webp'
         OUCCの普段の活動は主にチャットアプリ「Discord」上で行われており、技術に関する知見のほか、講義や大学生活、外部のイベントに関する情報などをやりとりしています。
       </div>
     </div>
-    <div class="max-w-[32rem] flex flex-col gap-2.5">
+    <div class="flex max-w-[32rem] flex-col gap-2.5">
       <Image class="w-full" src={meetingImage} alt="部会の様子" sizes="100%" />
       <div class="text-justify-ja">
         毎月部会を開催し、部の運営に関わることを話し合っています。部会は原則として参加必須ですが、事情がある場合は欠席し後日議事録を確認することもできます。

src/components/blog/BlogContent.astro

@@ -18,22 +18,22 @@ const author = await getEntry(blog.data.author)
 const { Content } = await blog.render()
 ---
 
-<div class="py-4 flex flex-col items-center">
-  <h1 class="text-3xl md:text-4xl font-bold p-3 text-center">
+<div class="flex flex-col items-center py-4">
+  <h1 class="p-3 text-center text-3xl font-bold md:text-4xl">
     {blog.data.title}
   </h1>
   <article
-    class="w-full max-w-padded-container bg-white md:rounded-2xl p-4 my-10"
+    class="my-10 w-full max-w-padded-container bg-white p-4 md:rounded-2xl"
   >
-    <div class="p-1 text-lg mb-1">
+    <div class="mb-1 p-1 text-lg">
       <a
-        class="hover:underline flex gap-2 items-center"
+        class="flex items-center gap-2 hover:underline"
         href={`/blog/authors/${author.id}`}
         ><AuthorIcon {...author.data} size={28} />{author.data.name}</a
       >
     </div>
     <TagSmallList tags={tags} />
-    <div class="text-sm text-gray-700 flex gap-3 p-2">
+    <div class="flex gap-3 p-2 text-sm text-gray-700">
       {
         blogMeta.updateDate && (
           <div>
@@ -50,7 +50,7 @@ const { Content } = await blog.render()
         >
       </div>
     </div>
-    <div class="w-full max-w-none pt-6 prose break-words">
+    <div class="prose w-full max-w-none break-words pt-6">
       <Content />
     </div>
   </article>
@@ -62,7 +62,7 @@ const { Content } = await blog.render()
 
   @layer components {
     .prose code:not(pre > *) {
-      @apply bg-gray-200 rounded px-1 font-normal;
+      @apply rounded bg-gray-200 px-1 font-normal;
     }
     .prose code:not(pre > *)::after {
       @apply content-none;
@@ -79,7 +79,7 @@ const { Content } = await blog.render()
     }
 
     .prose > table {
-      @apply block overflow-x-auto w-full whitespace-nowrap px-2;
+      @apply block w-full overflow-x-auto whitespace-nowrap px-2;
     }
   }
 </style>

src/components/blog/BlogListItem.astro

@@ -14,16 +14,16 @@ const author = await getEntry(blog.author)
 const tags = await getEntries(blog.tags)
 ---
 
-<li class="block bg-white rounded-xl p-5 border space-y-1">
+<li class="block space-y-1 rounded-xl border bg-white p-5">
   <a href={`/blog/articles/${slug}`}>
-    <h2 class="px-2 text-xl font-bold line-clamp-2 hover:underline">
+    <h2 class="line-clamp-2 px-2 text-xl font-bold hover:underline">
       {blog.title}
     </h2>
   </a>
   <TagSmallList tags={tags} />
-  <div class="px-2 flex gap-3 text-gray-600">
+  <div class="flex gap-3 px-2 text-gray-600">
     <div class="hover:underline">
-      <a href={`/blog/authors/${author.id}`} class="flex gap-2 items-center"
+      <a href={`/blog/authors/${author.id}`} class="flex items-center gap-2"
         ><AuthorIcon {...author.data} size={22} />{author.data.name}</a
       >
     </div>

src/components/blog/BlogTitle.astro

@@ -9,7 +9,7 @@ const { title, background } = Astro.props
 
 <h1
   class:list={[
-    'py-6 text-6xl flex justify-center items-center gap-x-5 bg-dot',
+    'bg-dot flex items-center justify-center gap-x-5 py-6 text-6xl',
     {
       'bg-dot-white': background === 'white',
       'bg-dot-primary': background === 'primary',
@@ -19,7 +19,7 @@ const { title, background } = Astro.props
 >
   {
     Astro.slots.has('icon') && (
-      <div class="bg-white rounded-full aspect-square h-[95px] flex justify-center items-center bg-none border">
+      <div class="flex aspect-square h-[95px] items-center justify-center rounded-full border bg-white bg-none">
         <slot name="icon" />
       </div>
     )

src/components/blog/tag/TagAboutSection.astro

@@ -23,7 +23,7 @@ const {
       ) : (
         <div class="px-2 py-3">
           <h2 class="text-xl">外部リンク</h2>
-          <ul class="list-disc list-inside pl-2">
+          <ul class="list-inside list-disc pl-2">
             {links.map(({ url, text }) => (
               <li>
                 <InlineLink href={url} class="no-underline hover:underline">

src/components/blog/tag/TagList.astro

@@ -9,7 +9,7 @@ interface Props {
 const { tags } = Astro.props
 ---
 
-<ul class="flex sm:flex-row flex-col flex-wrap gap-3">
+<ul class="flex flex-col flex-wrap gap-3 sm:flex-row">
   {
     tags.map((tag) => (
       <TagListItemCard

src/components/blog/tag/TagListItemCard.astro

@@ -10,12 +10,12 @@ const { id, articleCount, ...tag } = Astro.props
 ---
 
 <li
-  class="block sm:basis-[calc((100%-0.75rem)/2)] bg-white rounded-xl border space-y-1 group"
+  class="group block space-y-1 rounded-xl border bg-white sm:basis-[calc((100%-0.75rem)/2)]"
 >
-  <a class="w-full h-full p-4 flex items-center" href={`/blog/tags/${id}`}>
+  <a class="flex h-full w-full items-center p-4" href={`/blog/tags/${id}`}>
     <TagIcon tag={tag} size={40} />
     <div class="px-2">
-      <h2 class="text-xl font-bold line-clamp-1 group-hover:underline">
+      <h2 class="line-clamp-1 text-xl font-bold group-hover:underline">
         {tag.name}
       </h2>
       <p class="text-sm text-gray-600">記事数 : {articleCount}</p>

src/components/blog/tag/TagSmallList.astro

@@ -14,7 +14,7 @@ const { tags } = Astro.props
       <li>
         <a
           href={`/blog/tags/${tag.id}`}
-          class="flex items-center gap-1 bg-gray-100 hover:bg-gray-200 text-sm text-justify p-1 rounded-full"
+          class="flex items-center gap-1 rounded-full bg-gray-100 p-1 text-justify text-sm hover:bg-gray-200"
         >
           <TagIcon tag={tag.data} size={18} />
           <p>{tag.data.name}</p>

src/components/common/Hero.astro

@@ -11,13 +11,13 @@ const { title, copy, compact = false } = Astro.props
 ---
 
 <section class:list={[{ 'h-64': !compact }, 'relative']}>
-  <div class="absolute w-full h-full inset-0 bg-slate-600">
+  <div class="absolute inset-0 h-full w-full bg-slate-600">
     <HeroSlideshow />
   </div>
-  <div class="absolute w-full h-full inset-0 bg-[#00000099]"></div>
-  <div class="isolate h-full p-5 flex justify-center">
+  <div class="absolute inset-0 h-full w-full bg-[#00000099]"></div>
+  <div class="isolate flex h-full justify-center p-5">
     <div
-      class="w-full max-w-container flex flex-col justify-end gap-2 text-white"
+      class="flex w-full max-w-container flex-col justify-end gap-2 text-white"
     >
       <h1 class="text-6xl font-extrabold drop-shadow-[4px_4px_0_#1a2872]">
         <span>{title}</span>

src/components/common/HeroSlideshow.astro

@@ -7,7 +7,7 @@ import bushitsuImage from '@/assets/bushitsu.webp'
 import codeImage from '@/assets/code.webp'
 ---
 
-<div class="slideshow w-full h-full relative">
+<div class="slideshow relative h-full w-full">
   <Image src={vrchatImage} alt="" sizes="100vw" loading="eager" />
   <Image src={kc3Image} alt="" sizes="100vw" />
   <Image src={exhibition2Image} alt="" sizes="100vw" />

src/components/common/Icon.astro

@@ -29,7 +29,7 @@ const image = (await import(`../../assets/icons/${name}.svg`)).default
   role="img"
   aria-label={alt}
   class:list={[
-    'inline-block bg-current [mask-repeat:no-repeat] [mask-position:center] [mask-size:contain]',
+    'inline-block bg-current [mask-position:center] [mask-repeat:no-repeat] [mask-size:contain]',
     attrs.class,
   ]}
   style={{

src/components/common/Section.astro

@@ -10,15 +10,15 @@ const { background } = Astro.props
 
 <section
   class:list={[
-    'py-8 flex justify-center bg-dot',
+    'bg-dot flex justify-center py-8',
     {
       'bg-dot-white': background === 'white',
       'bg-dot-primary': background === 'primary',
       'bg-dot-secondary': background === 'secondary',
     },
   ]}
 >
-  <div class="w-full max-w-padded-container flex flex-col gap-5">
+  <div class="flex w-full max-w-padded-container flex-col gap-5">
     {
       Astro.slots.has('title') && (
         <Heading1 variant={background === 'primary' ? 'secondary' : 'primary'}>

src/components/common/button/LinkButton.astro

@@ -10,7 +10,7 @@ const { variant = 'primary', ...attrs } = Astro.props
 
 <a
   class:list={[
-    'px-5 py-2.5 rounded-full font-bold',
+    'rounded-full px-5 py-2.5 font-bold',
     {
       'bg-primary text-white drop-shadow-primary-light hover:drop-shadow-primary-heavy':
         variant === 'primary',
@@ -24,7 +24,7 @@ const { variant = 'primary', ...attrs } = Astro.props
         variant === 'peing',
     },
     'active:drop-shadow-none',
-    'active:translate-y-1 transition-[filter,transform] ease-in-out',
+    'transition-[filter,transform] ease-in-out active:translate-y-1',
     attrs.class,
   ]}
   {...attrs}

src/components/faq/FaqCard.astro

@@ -7,10 +7,10 @@ const { title } = Astro.props
 ---
 
 <li
-  class="flex-1 min-w-[18rem] p-5 rounded-xl border border-slate-300 bg-white drop-shadow flex flex-col gap-5"
+  class="flex min-w-[18rem] flex-1 flex-col gap-5 rounded-xl border border-slate-300 bg-white p-5 drop-shadow"
 >
   <h2 class="text-xl font-bold">{title}</h2>
-  <div class="w-1/3 h-1 rounded-full bg-primary" aria-hidden="true"></div>
+  <div class="h-1 w-1/3 rounded-full bg-primary" aria-hidden="true"></div>
   <div class="text-justify-ja">
     <slot />
   </div>

src/components/index/about/AboutCard.astro

@@ -1,9 +1,9 @@
 <div
-  class="w-full mt-12 p-5 pt-0 rounded-xl border border-slate-300 bg-white drop-shadow-contrast flex flex-col gap-5"
+  class="mt-12 flex w-full flex-col gap-5 rounded-xl border border-slate-300 bg-white p-5 pt-0 drop-shadow-contrast"
 >
   <div class="flex justify-center">
     <div
-      class="-translate-y-12 -mb-12 p-4 rounded-full border border-slate-300 bg-white drop-shadow-contrast"
+      class="-mb-12 -translate-y-12 rounded-full border border-slate-300 bg-white p-4 drop-shadow-contrast"
     >
       <slot name="icon" />
     </div>

src/components/index/about/AboutSection.astro

@@ -41,16 +41,16 @@ const items: Item[] = [
     <span class="inline-block">OUCCって</span>
     <span class="inline-block">どんなサークル？</span>
   </Fragment>
-  <ul class="flex flex-col items-center md:flex-row md:items-stretch gap-5">
+  <ul class="flex flex-col items-center gap-5 md:flex-row md:items-stretch">
     {
       items.map(({ icon, description }) => (
-        <li class="flex-1 max-w-[32rem] flex items-stretch">
+        <li class="flex max-w-[32rem] flex-1 items-stretch">
           <AboutCard>
             <Fragment slot="icon">
               {typeof icon === 'string' ? (
-                <Icon name={icon} alt="" class="w-20 h-20 align-top" />
+                <Icon name={icon} alt="" class="h-20 w-20 align-top" />
               ) : (
-                <Image src={icon} alt="" class="w-20 h-20 object-contain" />
+                <Image src={icon} alt="" class="h-20 w-20 object-contain" />
               )}
             </Fragment>
             {description.map((x) => (

src/components/index/join/JoinSection.astro

@@ -6,7 +6,7 @@ import LinkButton from '@/components/common/button/LinkButton.astro'
 <Section background="primary">
   <Fragment slot="title">体験入部のご案内</Fragment>
   <div class="flex flex-col gap-5">
-    <div class="text-white text-justify-ja">
+    <div class="text-justify-ja text-white">
       OUCCの普段の活動は、チャットアプリ「Discord」上で行われています。公開サーバーと部内サーバーの2つのチャットスペースがあり、公開サーバーはいつでも誰でも入退室可能です。
       まずは公開サーバーに参加し、部内の雰囲気を感じてみませんか？
     </div>

src/components/join/place/LargeCard.astro

@@ -7,7 +7,7 @@ const { title } = Astro.props
 ---
 
 <div
-  class="min-w-[16rem] p-4 rounded-lg bg-secondary border-2 border-primary drop-shadow-contrast grid grid-rows-[subgrid] row-span-3 gap-2.5"
+  class="row-span-3 grid min-w-[16rem] grid-rows-[subgrid] gap-2.5 rounded-lg border-2 border-primary bg-secondary p-4 drop-shadow-contrast"
 >
   <h2 class="text-xl font-bold">{title}</h2>
   <slot />