diff --git a/.junie/skills/tailwindcss-development/SKILL.md b/.junie/skills/tailwindcss-development/SKILL.md new file mode 100644 index 0000000..c0cb2fb --- /dev/null +++ b/.junie/skills/tailwindcss-development/SKILL.md @@ -0,0 +1,119 @@ +--- +name: tailwindcss-development +description: "Always invoke when the user's message includes 'tailwind' in any form. Also invoke for: building responsive grid layouts (multi-column card grids, product grids), flex/grid page structures (dashboards with sidebars, fixed topbars, mobile-toggle navs), styling UI components (cards, tables, navbars, pricing sections, forms, inputs, badges), adding dark mode variants, fixing spacing or typography, and Tailwind v3/v4 work. The core use case: writing or fixing Tailwind utility classes in HTML templates (Blade, JSX, Vue). Skip for backend PHP logic, database queries, API routes, JavaScript with no HTML/CSS component, CSS file audits, build tool configuration, and vanilla CSS." +license: MIT +metadata: + author: laravel +--- + +# Tailwind CSS Development + +## Documentation + +Use `search-docs` for detailed Tailwind CSS v4 patterns and documentation. + +## Basic Usage + +- Use Tailwind CSS classes to style HTML. Check and follow existing Tailwind conventions in the project before introducing new patterns. +- Offer to extract repeated patterns into components that match the project's conventions (e.g., Blade, JSX, Vue). +- Consider class placement, order, priority, and defaults. Remove redundant classes, add classes to parent or child elements carefully to reduce repetition, and group elements logically. + +## Tailwind CSS v4 Specifics + +- Always use Tailwind CSS v4 and avoid deprecated utilities. +- `corePlugins` is not supported in Tailwind v4. + +### CSS-First Configuration + +In Tailwind v4, configuration is CSS-first using the `@theme` directive — no separate `tailwind.config.js` file is needed: + + +```css +@theme { + --color-brand: oklch(0.72 0.11 178); +} +``` + +### Import Syntax + +In Tailwind v4, import Tailwind with a regular CSS `@import` statement instead of the `@tailwind` directives used in v3: + + +```diff +- @tailwind base; +- @tailwind components; +- @tailwind utilities; ++ @import "tailwindcss"; +``` + +### Replaced Utilities + +Tailwind v4 removed deprecated utilities. Use the replacements shown below. Opacity values remain numeric. + +| Deprecated | Replacement | +|------------|-------------| +| bg-opacity-* | bg-black/* | +| text-opacity-* | text-black/* | +| border-opacity-* | border-black/* | +| divide-opacity-* | divide-black/* | +| ring-opacity-* | ring-black/* | +| placeholder-opacity-* | placeholder-black/* | +| flex-shrink-* | shrink-* | +| flex-grow-* | grow-* | +| overflow-ellipsis | text-ellipsis | +| decoration-slice | box-decoration-slice | +| decoration-clone | box-decoration-clone | + +## Spacing + +Use `gap` utilities instead of margins for spacing between siblings: + + +```html +
h?l[c][f]=s+1:n.charAt(c-1)===i.charAt(f-1)?l[c][f]=l[c-1][f-1]:l[c][f]=Math.min(l[c-1][f-1]+1,Math.min(l[c][f-1]+1,l[c-1][f]+1)),l[c][f] =l+2?o=0:(n=u,a=p,o=m,s=$))}};if(e.isText()){for(let u=0;u{u();function ay(r,e){var t=r.type,i=r.value,n,s;return e&&(s=e(r))!==void 0?s:t==="word"||t==="space"?i:t==="string"?(n=r.quote||"",n+i+(r.unclosed?"":n)):t==="comment"?"/*"+i+(r.unclosed?"":"*/"):t==="div"?(r.before||"")+i+(r.after||""):Array.isArray(r.nodes)?(n=oy(r.nodes,e),t!=="function"?n:i+"("+(r.before||"")+n+(r.after||"")+(r.unclosed?"":")")):i}function oy(r,e){var t,i;if(Array.isArray(r)){for(t="",i=r.length-1;~i;i-=1)t=ay(r[i],e)+t;return t}return ay(r,e)}ly.exports=oy});var cy=x((Lq,fy)=>{u();var Ps="-".charCodeAt(0),Is="+".charCodeAt(0),Hl=".".charCodeAt(0),sO="e".charCodeAt(0),aO="E".charCodeAt(0);function oO(r){var e=r.charCodeAt(0),t;if(e===Is||e===Ps){if(t=r.charCodeAt(1),t>=48&&t<=57)return!0;var i=r.charCodeAt(2);return t===Hl&&i>=48&&i<=57}return e===Hl?(t=r.charCodeAt(1),t>=48&&t<=57):e>=48&&e<=57}fy.exports=function(r){var e=0,t=r.length,i,n,s;if(t===0||!oO(r))return!1;for(i=r.charCodeAt(e),(i===Is||i===Ps)&&e++;e{u();function rb(r,e){var t=r.type,i=r.value,n,s;return e&&(s=e(r))!==void 0?s:t==="word"||t==="space"?i:t==="string"?(n=r.quote||"",n+i+(r.unclosed?"":n)):t==="comment"?"/*"+i+(r.unclosed?"":"*/"):t==="div"?(r.before||"")+i+(r.after||""):Array.isArray(r.nodes)?(n=ib(r.nodes,e),t!=="function"?n:i+"("+(r.before||"")+n+(r.after||"")+(r.unclosed?"":")")):i}function ib(r,e){var t,i;if(Array.isArray(r)){for(t="",i=r.length-1;~i;i-=1)t=rb(r[i],e)+t;return t}return rb(r,e)}nb.exports=ib});var ob=x(($$,ab)=>{u();var zs="-".charCodeAt(0),js="+".charCodeAt(0),fu=".".charCodeAt(0),NO="e".charCodeAt(0),BO="E".charCodeAt(0);function FO(r){var e=r.charCodeAt(0),t;if(e===js||e===zs){if(t=r.charCodeAt(1),t>=48&&t<=57)return!0;var i=r.charCodeAt(2);return t===fu&&i>=48&&i<=57}return e===fu?(t=r.charCodeAt(1),t>=48&&t<=57):e>=48&&e<=57}ab.exports=function(r){var e=0,t=r.length,i,n,s;if(t===0||!FO(r))return!1;for(i=r.charCodeAt(e),(i===js||i===zs)&&e++;es&&ye(r,h-s,-1),ye(r,f-h,$),Mt(n,r,Q),s=f}}return l(e),o(!a),a}static empty(e){return new O(e?[e,-1]:[],[])}static fromJSON(e){if(!Array.isArray(e))throw new RangeError("Invalid JSON representation of ChangeSet");let t=[],i=[];for(let r=0;ru||f==u&&l.startSide>0&&l.endSide<=0)continue;(u-f||l.endSide-l.startSide)<0||(s<0&&(s=f),l.point&&(a=Math.max(a,u-f)),i.push(l),r.push(f-s),n.push(u-s))}return{mapped:i.length?new O(r,n,i,a):null,pos:s}}},M=class O{constructor(e,t,i,r){this.chunkPos=e,this.chunk=t,this.nextLayer=i,this.maxPoint=r}static create(e,t,i,r){return new O(e,t,i,r)}get length(){let e=this.chunk.length-1;return e<0?0:Math.max(this.chunkEnd(e),this.nextLayer.length)}get size(){if(this.isEmpty)return 0;let e=this.nextLayer.size;for(let t of this.chunk)e+=t.value.length;return e}chunkEnd(e){return this.chunkPos[e]+this.chunk[e].length}update(e){let{add:t=[],sort:i=!1,filterFrom:r=0,filterTo:n=this.length}=e,s=e.filter;if(t.length==0&&!s)return this;if(i&&(t=t.slice().sort(ia)),this.isEmpty)return t.length?O.of(t):this;let a=new Hr(this,null,-1).goto(0),o=0,l=[],c=new Le;for(;a.value||os)break;a=u,f<=0&&O.next(),f>=0&&t.next()}}function na(O,e){if(O.length!=e.length)return!1;for(let t=0;te;){let c=!0,h=!1;if(!l||o>n[l-1].to){let $=re[o-1];$!=a&&(c=!1,h=$==16)}let f=!c&&a==1?[]:null,u=c?i:i+1,Q=o;e:for(;;)if(l&&Q==n[l-1].to){if(h)break e;let $=n[--l];if(!c)for(let p=$.from,m=l;;){if(p==e)break e;if(m&&n[m-1].to==p)p=n[--m].from;else{if(re[p-1]==a)break e;break}}if(f)f.push($);else{$.to
{if(this.cache.add(s),s.isComposite())return!1},enter:s=>this.cache.add(s),leave:()=>{},break:()=>{}}}run(e,t){let i=t&&this.getCompositionContext(t.text);for(let r=0,n=0,s=0;;){let a=sr(O)),t.from,e.head>t.from?-1:1);return i==t.from?t:S.cursor(i,i