Introduce eslint tailwind plugin

digitalservicebund · Jan 21, 2025 · 66767ec · 66767ec
1 parent 24e34ab
commit 66767ec
Show file tree

Hide file tree

Showing 56 changed files with 207 additions and 187 deletions.
diff --git a/.eslintrc.cjs b/.eslintrc.cjs
@@ -91,6 +91,7 @@ module.exports = {
         "plugin:@typescript-eslint/recommended-type-checked",
         "plugin:import/recommended",
         "plugin:import/typescript",
+        "plugin:tailwindcss/recommended",
       ],
       parser: "@typescript-eslint/parser",
       parserOptions: {
@@ -111,6 +112,9 @@ module.exports = {
             project: ["**/tsconfig.json"],
           },
         },
+        tailwindcss: {
+          whitelist: ["ds\\-(.*)", "plausible\\-(.*)", "parent-bg-blue"],
+        },
       },
       rules: {
         "@typescript-eslint/ban-ts-comment": "warn",

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -53,7 +53,7 @@
     "@typescript-eslint/parser": "^8.21.0",
     "@vitejs/plugin-react": "^4.3.0",
     "autoprefixer": "^10.4.16",
-    "eslint": "^8.57.0",
+    "eslint": "^8.57.1",
     "eslint-config-prettier": "^10.0.1",
     "eslint-import-resolver-typescript": "^3.6.1",
     "eslint-plugin-import": "^2.31.0",
@@ -62,6 +62,7 @@
     "eslint-plugin-react": "^7.37.0",
     "eslint-plugin-react-hooks": "^5.0.0",
     "eslint-plugin-react-refresh": "^0.4.3",
+    "eslint-plugin-tailwindcss": "^3.18.0",
     "eslint-plugin-testing-library": "^7.0.0",
     "license-checker": "^25.0.0",
     "prettier": "^3.4.1",

diff --git a/packages/dito/app/components/Accordion.tsx b/packages/dito/app/components/Accordion.tsx
@@ -4,7 +4,7 @@ export default function Accordion({
   items,
 }: Readonly<{ items: AccordionItemProps[] }>) {
   return (
-    <div className="accordion bg-white border-b-2 border-b-blue-800">
+    <div className="border-b-2 border-b-blue-800 bg-white">
       {items.map((item) => (
         <AccordionItem
           key={item.headline}

diff --git a/packages/dito/app/components/AccordionItem.tsx b/packages/dito/app/components/AccordionItem.tsx
@@ -14,15 +14,15 @@ export default function AccordionItem({
   id,
 }: Readonly<AccordionItemProps>) {
   return (
-    <details className="border-t-2 border-t-blue-800 group" id={id}>
-      <summary className="w-full p-24 flex items-center justify-between cursor-pointer hover:bg-blue-200 group-open:bg-blue-200 focus-visible:bg-blue-200 focus-visible:outline focus-visible:outline-4 focus-visible:outline-blue-800 [&::-webkit-details-marker]:hidden">
-        <div className="pr-10 font-bold text-left text-16 leading-22 md:text-18 md:leading-24 text-blue-800">
+    <details className="group border-t-2 border-t-blue-800" id={id}>
+      <summary className="flex w-full cursor-pointer items-center justify-between p-24 hover:bg-blue-200 focus-visible:bg-blue-200 focus-visible:outline focus-visible:outline-4 focus-visible:outline-blue-800 group-open:bg-blue-200 [&::-webkit-details-marker]:hidden">
+        <div className="pr-10 text-left font-bold text-blue-800">
           {headline}
         </div>
-        <Add className="w-24 h-24 flex-shrink-0 fill-blue-800 group-open:hidden" />
-        <Remove className="w-24 h-24 flex-shrink-0 fill-blue-800 hidden group-open:block" />
+        <Add className="size-24 shrink-0 fill-blue-800 group-open:hidden" />
+        <Remove className="hidden size-24 shrink-0 fill-blue-800 group-open:block" />
       </summary>
-      <div className="p-24 pr-24">
+      <div className="p-24">
         {typeof content === "string" ? (
           <RichText markdown={content} />
         ) : (

diff --git a/packages/dito/app/components/FeedbackForm.tsx b/packages/dito/app/components/FeedbackForm.tsx
@@ -141,7 +141,7 @@ function FeedbackQuestion({
                 );
               })}
             </div>
-            <div className="mt-20 text-gray-900 flex justify-between">
+            <div className="mt-20 flex justify-between text-gray-900">
               <span className="">{feedbackForm.labels[0]}</span>
               <span className="">{feedbackForm.labels[4]}</span>
             </div>
@@ -186,7 +186,7 @@ export default function FeedbackForm() {
   if (submitted) {
     return (
       <div ref={thankYouMessageRef} tabIndex={-1} aria-live="polite">
-        <Background backgroundColor="blue" className="pt-40 pb-48">
+        <Background backgroundColor="blue" className="pb-48 pt-40">
           <Container backgroundColor="white" overhangingBackground>
             <h2>Vielen Dank für Ihr Feedback!</h2>
             <br />
@@ -201,7 +201,7 @@ export default function FeedbackForm() {
   }
 
   return (
-    <Background backgroundColor="blue" className="pt-40 pb-48">
+    <Background backgroundColor="blue" className="pb-48 pt-40">
       <Container backgroundColor="white" overhangingBackground>
         <h2>{feedbackForm.heading}</h2>
         <form onSubmit={handleSubmit} className="mb-48">
@@ -216,7 +216,7 @@ export default function FeedbackForm() {
           />
           <button
             type="submit"
-            className="mt-16 bg-blue-800 text-white px-24 py-12"
+            className="mt-16 bg-blue-800 px-24 py-12 text-white"
           >
             Feedback absenden
           </button>

diff --git a/packages/dito/app/components/InterviewBanner.tsx b/packages/dito/app/components/InterviewBanner.tsx
@@ -5,7 +5,7 @@ import { interviewBanner } from "resources/content";
 export default function InterviewBanner() {
   return (
     <Container
-      className="mt-40 mb-48"
+      className="mb-48 mt-40"
       backgroundColor="blue"
       overhangingBackground
     >

diff --git a/packages/dito/app/components/LinkBar.tsx b/packages/dito/app/components/LinkBar.tsx
@@ -12,7 +12,7 @@ const LinkBar = <T extends { url: string }>({
   );
 
   return (
-    <div className="flex justify-center space-x-8 mt-20">
+    <div className="mt-20 flex justify-center space-x-8">
       {elements.map((element, index) => (
         <Link
           key={element.url}

diff --git a/packages/dito/app/components/ParagraphList.tsx b/packages/dito/app/components/ParagraphList.tsx
@@ -107,7 +107,7 @@ const PrincipleExplanation = ({
 
   return (
     <div className={explanationClasses} id={id} data-testid={id}>
-      <div className="flex gap-4 content-center">
+      <div className="flex content-center gap-4">
         <Heading
           tagName="h4"
           text={`Prinzip ${erfuellung.Prinzip.Nummer} – ${erfuellung.Prinzip.Name}`}
@@ -294,7 +294,7 @@ function Paragraph({
           className="font-bold"
         />
         <p className="ds-subhead font-bold">{paragraph.Titel}</p>
-        <div className="border-l-4 border-gray-300 pl-8 ds-stack-16">
+        <div className="ds-stack-16 border-l-4 border-gray-300 pl-8">
           {groupedAbsaetze.map((absatzGroup) => (
             <AbsatzContent
               key={"id" in absatzGroup ? absatzGroup.id : absatzGroup[0].number}

diff --git a/packages/dito/app/components/VisualisationItem.tsx b/packages/dito/app/components/VisualisationItem.tsx
@@ -24,28 +24,28 @@ export default function VisualisationItem({
   const visualisationUrl = visualisierung.Bild.url.split("/").pop();
 
   return (
-    <div className="flex max-sm:flex-col gap-16 sm:gap-32">
+    <div className="flex gap-16 max-sm:flex-col sm:gap-32">
       <div className="sm:w-1/2">
         <Link
           to={`${ROUTE_VISUALISATION.url}/${visualisationUrl}`}
           reloadDocument
           target="_blank"
           rel="noreferrer"
           state={{ image: visualisierung.Bild }}
-          className="block relative border border-blue-500 aspect-square overflow-hidden cursor-zoom-in"
+          className="relative block aspect-square cursor-zoom-in overflow-hidden border border-blue-500"
         >
           <Image
             url={visualisierung.Bild.url}
             alternativeText={visualisierung.Bild.alternativeText}
-            className="w-full h-full object-cover"
+            className="size-full object-cover"
           />
           <ZoomInOutlined
             className="absolute bottom-16 left-16 bg-blue-800 p-1 shadow"
             fill="white"
           />
         </Link>
 
-        <div className="p-12 bg-gray-100">
+        <div className="bg-gray-100 p-12">
           <LabelValuePair
             label={regulations.visualisations.imageInfo.legalArea}
             value={visualisierung.Digitalcheck?.Regelungsvorhaben?.Rechtsgebiet}
@@ -71,7 +71,7 @@ export default function VisualisationItem({
           />
         </div>
       </div>
-      <div className="sm:w-1/2 mb-12">
+      <div className="mb-12 sm:w-1/2">
         <Heading tagName="h3" look="ds-heading-03-reg" className="mb-16">
           {visualisierung.Titel}
         </Heading>

diff --git a/packages/dito/app/root.tsx b/packages/dito/app/root.tsx
@@ -217,7 +217,7 @@ const PageHeader = ({
   includeBreadcrumbs?: boolean;
 }) => (
   <header>
-    <div className="min-h-64 p-16 flex justify-between items-center">
+    <div className="flex min-h-64 items-center justify-between p-16">
       <Link to={ROUTE_LANDING.url}>
         <img src={bundLogo} alt="Logo des Bundes" width={54} />
       </Link>
@@ -231,7 +231,7 @@ const PageHeader = ({
           <span className="mx-8">|</span>
           {header.contact.msg}
         </div>
-        <PhoneOutlined className="mx-8 w-18" />
+        <PhoneOutlined className="mx-8" />
         <a
           href={`tel:${header.contact.number}`}
           className="ds-link-01-bold plausible-event-name=Phone+Click plausible-event-position=header"
@@ -273,7 +273,7 @@ function Document({
         <Meta />
         <Links />
       </head>
-      <body className="min-h-screen flex flex-col">
+      <body className="flex min-h-screen flex-col">
         <PageHeader includeBreadcrumbs={!error} />
         {children}
         <Footer links={footerLinks} />

diff --git a/packages/dito/app/routes/_index.tsx b/packages/dito/app/routes/_index.tsx
@@ -16,7 +16,7 @@ export default function Index() {
   const showLinksToTools = useFeatureFlag("digitalcheck.show-links-to-tools");
   return (
     <>
-      <Background backgroundColor="darkBlue" className="pt-24 pb-24">
+      <Background backgroundColor="darkBlue" className="py-24">
         <Container>
           <Header
             heading={{
@@ -47,9 +47,9 @@ export default function Index() {
           content={landing.dataNotice.content}
         />
       </Container> */}
-      <div className="bg-[url('/assets/images/trainings.jpeg')] bg-[0%_35%] bg-cover">
+      <div className="bg-[url('/assets/images/trainings.jpeg')] bg-cover bg-[0%_35%]">
         <Container>
-          <div className="max-w-[630px] bg-white px-16 py-28 md:px-80 md:py-40 rounded-lg">
+          <div className="max-w-[630px] rounded-lg bg-white px-16 py-28 md:px-80 md:py-40">
             <Box
               heading={{ text: landing.trainings.title }}
               content={{ markdown: landing.trainings.text }}
@@ -77,9 +77,9 @@ export default function Index() {
                 text={landing.links.title}
               />
               <RichText markdown={landing.links.subtitle} />
-              <div className="flex flex-row max-md:flex-col gap-24 pt-32">
+              <div className="flex flex-row gap-24 pt-32 max-md:flex-col">
                 {landing.links.items.map((item) => (
-                  <div key={item.label} className="bg-white p-28 rounded-md">
+                  <div key={item.label} className="rounded-md bg-white p-28">
                     <Box
                       heading={{
                         tagName: "h3",
@@ -94,7 +94,7 @@ export default function Index() {
                       }}
                       content={{ markdown: item.content }}
                       buttons={item.buttons}
-                      className="!justify-between h-full"
+                      className="h-full !justify-between"
                     />
                   </div>
                 ))}
@@ -104,15 +104,15 @@ export default function Index() {
         </Background>
       )}
       <SupportBanner />
-      <Background backgroundColor="darkBlue" className="pt-24 pb-24">
+      <Background backgroundColor="darkBlue" className="py-24">
         <Container>
           <div className="ds-stack-32 scroll-my-40">
             <Heading tagName="h2" text={landing.principles.title} />
             <ol className="list-unstyled space-y-8">
               {landing.principles.content.map((principle) => (
                 <li
                   key={principle}
-                  className="first:before:content-none before:content-[''] before:block before:w-1/2 before:mb-8 before:border-t before:border-blue-700"
+                  className="before:mb-8 before:block before:w-1/2 before:border-t before:border-blue-700 before:content-[''] first:before:content-none"
                 >
                   {principle}
                 </li>

diff --git a/packages/dito/app/routes/beispiele._index.tsx b/packages/dito/app/routes/beispiele._index.tsx
@@ -26,7 +26,7 @@ export default function Digitaltauglichkeit_index() {
   );
   return (
     <>
-      <Background backgroundColor="darkBlue" className="pt-24 pb-24">
+      <Background backgroundColor="darkBlue" className="py-24">
         <Container>
           <Header
             heading={{

diff --git a/packages/dito/app/routes/beispiele.prinzipien.$prinzip.tsx b/packages/dito/app/routes/beispiele.prinzipien.$prinzip.tsx
@@ -97,7 +97,7 @@ export default function DigitaltauglichkeitPrinzipienDetail() {
           />
           <BlocksRenderer content={prinzip.Beschreibung}></BlocksRenderer>
         </Container>
-        <Container className="flex space-x-20 items-center">
+        <Container className="flex items-center space-x-20">
           {prinzips.map((p) =>
             prinzip.Nummer === p.Nummer ? (
               <div key={p.Nummer} className="ds-label-01-bold">
@@ -135,9 +135,9 @@ export default function DigitaltauglichkeitPrinzipienDetail() {
                       tagName="h2"
                       text={digitalcheck.Regelungsvorhaben.Titel}
                       look="ds-heading-03-bold"
-                      className="inline max-w-full text-link"
+                      className="text-link inline max-w-full"
                     />
-                    <OpenInNewIcon className="!inline scale-90 ml-4 mb-6 fill-blue-800" />
+                    <OpenInNewIcon className="mb-6 ml-4 !inline scale-90 fill-blue-800" />
                   </Link>
                   <InlineInfoList
                     className="my-32 pl-16"

diff --git a/packages/dito/app/routes/beispiele.regelungen.$regelung.tsx b/packages/dito/app/routes/beispiele.regelungen.$regelung.tsx
@@ -104,7 +104,7 @@ export default function Gesetz() {
               markdown: regulations.subtitle[0],
             }}
           />
-          <p className="mt-24 ds-subhead font-bold">
+          <p className="ds-subhead mt-24 font-bold">
             <b>{regulations.subtitle[1]}</b>
           </p>
           <ol className="list-unstyled mt-16">
@@ -115,7 +115,7 @@ export default function Gesetz() {
                     ↓
                     <Link
                       to={`#${slugify(regulations.principles.title)}-${index}`}
-                      className="ml-4 underline underline-offset-4 decoration-1"
+                      className="ml-4 underline decoration-1 underline-offset-4"
                     >
                       {regulations.principles.title}
                     </Link>
@@ -126,7 +126,7 @@ export default function Gesetz() {
                     ↓
                     <Link
                       to={`#${slugify(regulations.visualisations.title)}-${index}`}
-                      className="ml-4 underline underline-offset-4 decoration-1"
+                      className="ml-4 underline decoration-1 underline-offset-4"
                     >
                       {regulations.visualisations.title}
                     </Link>
@@ -137,7 +137,7 @@ export default function Gesetz() {
                     ↓
                     <Link
                       to={`#${slugify(regulations.nkr.title)}-${index}`}
-                      className="ml-4 underline underline-offset-4 decoration-1"
+                      className="ml-4 underline decoration-1 underline-offset-4"
                     >
                       {regulations.nkr.title}
                     </Link>
@@ -149,7 +149,7 @@ export default function Gesetz() {
         </Container>
       </Background>
       <Background backgroundColor="midLightBlue">
-        <Container className="pt-0 pb-0">
+        <Container className="py-0">
           <InlineInfoList
             items={[
               {
@@ -195,7 +195,7 @@ export default function Gesetz() {
           </Container>
         )}
       {regelung.Digitalchecks.map((digitalcheck, index) => (
-        <Container key={digitalcheck.documentId} className="pb-80 ds-stack-64">
+        <Container key={digitalcheck.documentId} className="ds-stack-64 pb-80">
           {/* ----- Formulierungen / Prinziperfüllungen ----- */}
           {digitalcheck.Paragraphen.length > 0 && (
             <>