Skip to content

chore: sort prettier classes with prettier #169

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Oct 9, 2024
+189 −85
Merged

chore: sort prettier classes with prettier #169

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
e9f171a
chore: sort classnames with prettier
hyunbinseo Oct 9, 2024
98efc3e
keep prettier config in `package.json` file
RobinMalfait Oct 9, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 3 additions & 3 deletions README.md
View file
Original file line number Diff line number Diff line change
@@ -55,7 +55,7 @@ Every element has been normalized/reset to a simple visually consistent style th

```html
<!-- You can actually customize padding on a select element now: -->
<select class="px-4 py-3 rounded-full">
<select class="rounded-full px-4 py-3">
<!-- ... -->
</select>

@@ -70,9 +70,9 @@ More customization examples and best practices coming soon.
In addition to the global styles, we also generate a set of corresponding classes which can be used to explicitly apply the form styles to an element. This can be useful in situations where you need to make a non-form element, such as a `<div>`, look like a form element.

```html
<input type="email" class="form-input px-4 py-3 rounded-full">
<input type="email" class="form-input rounded-full px-4 py-3" />

<select class="form-select px-4 py-3 rounded-full">
<select class="form-select rounded-full px-4 py-3">
<!-- ... -->
</select>

36 changes: 18 additions & 18 deletions index.html
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<!DOCTYPE html>
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
@@ -7,8 +7,8 @@
<link rel="stylesheet" href="/dist/tailwind.css" />
</head>
<body>
<div class="antialiased text-gray-900 px-6">
<div class="max-w-xl mx-auto py-12 divide-y md:max-w-4xl">
<div class="px-6 text-gray-900 antialiased">
<div class="mx-auto max-w-xl divide-y py-12 md:max-w-4xl">
<div class="py-8">
<h1 class="text-4xl font-bold">@tailwindcss/forms examples</h1>
<p class="mt-2 text-lg text-gray-600">
@@ -41,7 +41,7 @@ <h2 class="text-2xl font-bold">Unstyled</h2>
</label>
<label class="block">
<span class="text-gray-700">What type of event is it?</span>
<select class="block w-full mt-1">
<select class="mt-1 block w-full">
<option>Corporate event</option>
<option>Wedding</option>
<option>Birthday</option>
@@ -95,7 +95,7 @@ <h2 class="text-2xl font-bold">Simple</h2>
<label class="block">
<span class="text-gray-700">What type of event is it?</span>
<select
class="block w-full mt-1 rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50"
class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50"
>
<option>Corporate event</option>
<option>Wedding</option>
@@ -116,7 +116,7 @@ <h2 class="text-2xl font-bold">Simple</h2>
<label class="inline-flex items-center">
<input
type="checkbox"
class="rounded border-gray-300 text-indigo-600 shadow-sm focus:border-indigo-300 focus:ring focus:ring-offset-0 focus:ring-indigo-200 focus:ring-opacity-50"
class="rounded border-gray-300 text-indigo-600 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 focus:ring-offset-0"
checked
/>
<span class="ml-2">Email me news and special offers</span>
@@ -135,29 +135,29 @@ <h2 class="text-2xl font-bold">Underline</h2>
<span class="text-gray-700">Full name</span>
<input
type="text"
class="mt-0 block w-full px-0.5 border-0 border-b-2 border-gray-200 focus:ring-0 focus:border-black"
class="mt-0 block w-full border-0 border-b-2 border-gray-200 px-0.5 focus:border-black focus:ring-0"
placeholder=""
/>
</label>
<label class="block">
<span class="text-gray-700">Email address</span>
<input
type="email"
class="mt-0 block w-full px-0.5 border-0 border-b-2 border-gray-200 focus:ring-0 focus:border-black"
class="mt-0 block w-full border-0 border-b-2 border-gray-200 px-0.5 focus:border-black focus:ring-0"
placeholder="[email protected]"
/>
</label>
<label class="block">
<span class="text-gray-700">When is your event?</span>
<input
type="date"
class="mt-0 block w-full px-0.5 border-0 border-b-2 border-gray-200 focus:ring-0 focus:border-black"
class="mt-0 block w-full border-0 border-b-2 border-gray-200 px-0.5 focus:border-black focus:ring-0"
/>
</label>
<label class="block">
<span class="text-gray-700">What type of event is it?</span>
<select
class="block w-full mt-0 pl-0.5 pr-7 border-0 border-b-2 border-gray-200 focus:ring-0 focus:border-black"
class="mt-0 block w-full border-0 border-b-2 border-gray-200 pl-0.5 pr-7 focus:border-black focus:ring-0"
>
<option>Corporate event</option>
<option>Wedding</option>
@@ -168,7 +168,7 @@ <h2 class="text-2xl font-bold">Underline</h2>
<label class="block">
<span class="text-gray-700">Additional details</span>
<textarea
class="mt-0 block w-full px-0.5 border-0 border-b-2 border-gray-200 focus:ring-0 focus:border-black"
class="mt-0 block w-full border-0 border-b-2 border-gray-200 px-0.5 focus:border-black focus:ring-0"
rows="2"
></textarea>
</label>
@@ -178,7 +178,7 @@ <h2 class="text-2xl font-bold">Underline</h2>
<label class="inline-flex items-center">
<input
type="checkbox"
class="border-gray-300 border-2 text-black focus:border-gray-300 focus:ring-black"
class="border-2 border-gray-300 text-black focus:border-gray-300 focus:ring-black"
/>
<span class="ml-2">Email me news and special offers</span>
</label>
@@ -196,29 +196,29 @@ <h2 class="text-2xl font-bold">Solid</h2>
<span class="text-gray-700">Full name</span>
<input
type="text"
class="mt-1 block w-full rounded-md bg-gray-100 border-transparent focus:border-gray-500 focus:bg-white focus:ring-0"
class="mt-1 block w-full rounded-md border-transparent bg-gray-100 focus:border-gray-500 focus:bg-white focus:ring-0"
placeholder=""
/>
</label>
<label class="block">
<span class="text-gray-700">Email address</span>
<input
type="email"
class="mt-1 block w-full rounded-md bg-gray-100 border-transparent focus:border-gray-500 focus:bg-white focus:ring-0"
class="mt-1 block w-full rounded-md border-transparent bg-gray-100 focus:border-gray-500 focus:bg-white focus:ring-0"
placeholder="[email protected]"
/>
</label>
<label class="block">
<span class="text-gray-700">When is your event?</span>
<input
type="date"
class="mt-1 block w-full rounded-md bg-gray-100 border-transparent focus:border-gray-500 focus:bg-white focus:ring-0"
class="mt-1 block w-full rounded-md border-transparent bg-gray-100 focus:border-gray-500 focus:bg-white focus:ring-0"
/>
</label>
<label class="block">
<span class="text-gray-700">What type of event is it?</span>
<select
class="block w-full mt-1 rounded-md bg-gray-100 border-transparent focus:border-gray-500 focus:bg-white focus:ring-0"
class="mt-1 block w-full rounded-md border-transparent bg-gray-100 focus:border-gray-500 focus:bg-white focus:ring-0"
>
<option>Corporate event</option>
<option>Wedding</option>
@@ -229,7 +229,7 @@ <h2 class="text-2xl font-bold">Solid</h2>
<label class="block">
<span class="text-gray-700">Additional details</span>
<textarea
class="mt-1 block w-full rounded-md bg-gray-100 border-transparent focus:border-gray-500 focus:bg-white focus:ring-0"
class="mt-1 block w-full rounded-md border-transparent bg-gray-100 focus:border-gray-500 focus:bg-white focus:ring-0"
rows="3"
></textarea>
</label>
@@ -239,7 +239,7 @@ <h2 class="text-2xl font-bold">Solid</h2>
<label class="inline-flex items-center">
<input
type="checkbox"
class="rounded bg-gray-200 border-transparent focus:border-transparent focus:bg-gray-200 text-gray-700 focus:ring-1 focus:ring-offset-2 focus:ring-gray-500"
class="rounded border-transparent bg-gray-200 text-gray-700 focus:border-transparent focus:bg-gray-200 focus:ring-1 focus:ring-gray-500 focus:ring-offset-2"
/>
<span class="ml-2">Email me news and special offers</span>
</label>
22 changes: 11 additions & 11 deletions kitchen-sink.html
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<!DOCTYPE html>
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
@@ -7,13 +7,13 @@
<link rel="stylesheet" href="/dist/tailwind.css" />
</head>
<body>
<div class="antialiased text-gray-900 px-6">
<div class="max-w-xl mx-auto py-12 md:max-w-4xl">
<div class="px-6 text-gray-900 antialiased">
<div class="mx-auto max-w-xl py-12 md:max-w-4xl">
<h2 class="text-2xl font-bold">Reset styles</h2>
<p class="mt-2 text-lg text-gray-500">
These are form elements this plugin styles by default.
</p>
<div class="mt-8 grid grid-cols-1 md:grid-cols-2 gap-6 items-start">
<div class="mt-8 grid grid-cols-1 items-start gap-6 md:grid-cols-2">
<div class="grid grid-cols-1 gap-6">
<label class="block">
<span class="text-gray-700">Input (text)</span>
@@ -98,14 +98,14 @@ <h2 class="text-2xl font-bold">Reset styles</h2>
</label>
<label class="block">
<span class="text-gray-700">Select</span>
<select class="form-select block w-full mt-1">
<select class="form-select mt-1 block w-full">
<option>Option 1</option>
<option>Option 2</option>
</select>
</label>
<label class="block">
<span class="text-gray-700">Select (single, with size)</span>
<select class="form-select block w-full mt-1" size="3">
<select class="form-select mt-1 block w-full" size="3">
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
@@ -115,7 +115,7 @@ <h2 class="text-2xl font-bold">Reset styles</h2>
</label>
<label class="block">
<span class="text-gray-700">Select (multiple)</span>
<select class="form-multiselect block w-full mt-1" multiple>
<select class="form-multiselect mt-1 block w-full" multiple>
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
@@ -125,7 +125,7 @@ <h2 class="text-2xl font-bold">Reset styles</h2>
</label>
<label class="block">
<span class="text-gray-700">Select (multiple, with size)</span>
<select class="form-multiselect block w-full mt-1" multiple size="3">
<select class="form-multiselect mt-1 block w-full" multiple size="3">
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
@@ -136,7 +136,7 @@ <h2 class="text-2xl font-bold">Reset styles</h2>
<label class="block">
<span class="text-gray-700">Textarea</span>
<textarea
class="form-textarea mt-1 block w-full h-24"
class="form-textarea mt-1 block h-24 w-full"
rows="3"
placeholder="Enter some long form content."
></textarea>
@@ -190,13 +190,13 @@ <h2 class="text-2xl font-bold">Reset styles</h2>
</div>
</div>
</div>
<div class="max-w-4xl mx-auto py-12">
<div class="mx-auto max-w-4xl py-12">
<h2 class="text-2xl font-bold">Untouched</h2>
<p class="mt-2 text-lg text-gray-500">
These are form elements we don't handle (yet?), but we use this to make sure we haven't
accidentally styled them by mistake.
</p>
<div class="mt-8 grid grid-cols-2 gap-6 items-start">
<div class="mt-8 grid grid-cols-2 items-start gap-6">
<div class="grid grid-cols-1 gap-6">
<label class="block">
<span class="text-gray-700">Input (range)</span>
196 changes: 146 additions & 50 deletions package-lock.json
View file
10 changes: 8 additions & 2 deletions package.json
View file
Original file line number Diff line number Diff line change
@@ -12,7 +12,10 @@
"printWidth": 100,
"semi": false,
"singleQuote": true,
"trailingComma": "es5"
"trailingComma": "es5",
"plugins": [
"prettier-plugin-tailwindcss"
]
},
"scripts": {
"dev": "concurrently \"npm run serve\" \"npm run watch\"",
@@ -21,7 +24,8 @@
"build": "tailwindcss -o dist/tailwind.css",
"test": "exit 0",
"release-channel": "node ./scripts/release-channel.js",
"release-notes": "node ./scripts/release-notes.js"
"release-notes": "node ./scripts/release-notes.js",
"format": "prettier . --write"
},
"peerDependencies": {
"tailwindcss": ">=3.0.0 || >= 3.0.0-alpha.1 || >= 4.0.0-alpha.20"
@@ -31,6 +35,8 @@
"concurrently": "^5.3.0",
"live-server": "^1.2.2",
"postcss": "^8.4.13",
"prettier": "^3.3.3",
"prettier-plugin-tailwindcss": "^0.6.8",
"tailwindcss": "^3.0.24"
},
"dependencies": {
4 changes: 3 additions & 1 deletion src/index.d.ts
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,6 @@
declare function plugin(options?: Partial<{ strategy: 'base' | 'class' }>): { handler: () => void }
declare function plugin(options?: Partial<{ strategy: 'base' | 'class' }>): {
handler: () => void
}

declare namespace plugin {
const __isOptionsFunction: true