css refactoring

src/lib/components/TimelineItem.svelte

@@ -1,13 +1,13 @@
 <script>
     export let name = null;
-    export let colspan = null;
-    export let start = null;
+    export let colspan = 1;
+    export let start = 1;
     export let img = null;
     export let big = null;
     export let medium = null;
 </script>
 
-<div class="bg-slate-200 hover:bg-slate-300 px-2 py-4 text-slate-600 text-sm md:text-md col-start-{start} {colspan ? 'col-span-'+colspan : ''} content-center">
+<div class="bg-slate-200 hover:bg-slate-300 px-2 py-4 text-slate-600 text-sm md:text-md content-center" style="grid-column: {start} / span {colspan}">
     <div class="mb-2">{name}</div>
     {#if img}
         {#if big}

tailwind.config.cjs

@@ -19,13 +19,5 @@ module.exports = {
       },
     },
   },
-  plugins: [],
-  safelist: [
-    {
-      pattern: /col-span-(1|2|3|4|5|6|7|8|9|10|11|12)/,
-    },
-    {
-      pattern: /col-start-(1|2|3|4|5|6|7|8|9|10|11|12)/,
-    },
-  ]
+  plugins: []
 };