diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index 3889c27c..07fb8285 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -37,10 +37,7 @@ jobs:
fail-fast: false
matrix:
plat: ["ubuntu", "windows", "macos"]
- tailwind: ["--version=~>3.4.14", "--version=~>4.0.0.alpha.27"]
runs-on: ${{matrix.plat}}-latest
- env:
- TAILWINDCSSOPTS: ${{ matrix.tailwind }}
steps:
- uses: actions/checkout@v4
- uses: ruby/setup-ruby@v1
diff --git a/.github/workflows/upstream.yml b/.github/workflows/upstream.yml
index 5c213e6e..e491a957 100644
--- a/.github/workflows/upstream.yml
+++ b/.github/workflows/upstream.yml
@@ -42,10 +42,8 @@ jobs:
matrix:
plat: ["ubuntu"]
ref: ["7-2-stable", "8-0-stable", "main"]
- tailwind: ["--version=~>3.4.14", "--version=~>4.0.0.alpha.27"]
env:
RAILSOPTS: --git=https://github.com/rails/rails --ref=${{ matrix.ref }}
- TAILWINDCSSOPTS: ${{ matrix.tailwind }}
steps:
- uses: actions/checkout@v4
- uses: ruby/setup-ruby@v1
diff --git a/Gemfile.lock b/Gemfile.lock
index cd3b9354..c671e3a8 100644
--- a/Gemfile.lock
+++ b/Gemfile.lock
@@ -3,7 +3,7 @@ PATH
specs:
tailwindcss-rails (3.3.0)
railties (>= 7.0.0)
- tailwindcss-ruby
+ tailwindcss-ruby (~> 4.0)
GEM
remote: https://rubygems.org/
@@ -140,12 +140,11 @@ GEM
io-console (~> 0.5)
securerandom (0.4.1)
stringio (3.1.2)
- tailwindcss-ruby (3.4.17)
- tailwindcss-ruby (3.4.17-aarch64-linux)
- tailwindcss-ruby (3.4.17-arm-linux)
- tailwindcss-ruby (3.4.17-arm64-darwin)
- tailwindcss-ruby (3.4.17-x86_64-darwin)
- tailwindcss-ruby (3.4.17-x86_64-linux)
+ tailwindcss-ruby (4.0.0)
+ tailwindcss-ruby (4.0.0-aarch64-linux-gnu)
+ tailwindcss-ruby (4.0.0-arm64-darwin)
+ tailwindcss-ruby (4.0.0-x86_64-darwin)
+ tailwindcss-ruby (4.0.0-x86_64-linux-gnu)
thor (1.3.2)
timeout (0.4.3)
tzinfo (2.0.6)
diff --git a/README.md b/README.md
index e81a5474..c80bae4d 100644
--- a/README.md
+++ b/README.md
@@ -59,17 +59,13 @@ You can also use a local (npm-based) installation if you prefer, please go to ht
### Configuration and commands
-#### Configuration file: `config/tailwind.config.js`
-
-You can customize the Tailwind build through the `config/tailwind.config.js` file, just like you would if Tailwind was running in a traditional node installation. All the first-party plugins are supported.
-
#### Input file: `app/assets/stylesheets/application.tailwind.css`
-The installer will generate a Tailwind input file in `app/assets/stylesheets/application.tailwind.css`. This is where you import the plugins you want to use, and where you can setup your custom `@apply` rules.
+The installer will generate a Tailwind input file in `app/assets/stylesheets/application.tailwind.css`. This is where you import the plugins you want to use and where you can setup your custom `@apply` rules.
#### Output file: `app/assets/builds/tailwind.css`
-When you run `rails tailwindcss:build`, the input file will be used to generate the output in `app/assets/builds/tailwind.css`. That's the output CSS that you'll include in your app (the installer automatically configures this, alongside the Inter font as well).
+When you run `rails tailwindcss:build`, the input file will be used to generate the output in `app/assets/builds/tailwind.css`. That's the output CSS that you'll include in your app.
#### Commands
diff --git a/app/assets/stylesheets/inter-font.css b/app/assets/stylesheets/inter-font.css
deleted file mode 100644
index ddeabaf5..00000000
--- a/app/assets/stylesheets/inter-font.css
+++ /dev/null
@@ -1,194 +0,0 @@
-/*
- *= link_directory ../fonts
- */
-
-@font-face {
- font-family: 'Inter var';
- font-style: italic;
- font-weight: 100 900;
- font-display: swap;
- src: url('Inter-italic.extra.var.woff2') format('woff2');
- unicode-range: U+E000,U+E002-E081,U+E093-E097,U+E0A5-E0E7,U+E0F3-E11D,U+E11E-E165,U+EE01,U+F6C3;
- font-named-instance: 'Italic';
-}
-/* alternates */
-@font-face {
- font-family: 'Inter var';
- font-style: italic;
- font-weight: 100 900;
- font-display: swap;
- src: url('Inter-italic.alternates.var.woff2') format('woff2');
- unicode-range: U+E000,U+E002-E081,U+E093-E097,U+E0A5-E0E7,U+E0F3-E11D,U+E11E-E165,U+EE01,U+F6C3;
- font-named-instance: 'Italic';
-}
-/* symbols */
-@font-face {
- font-family: 'Inter var';
- font-style: italic;
- font-weight: 100 900;
- font-display: swap;
- src: url('Inter-italic.symbols.var.woff2') format('woff2');
- unicode-range: U+20DD-20DF,U+2190-219A,U+21A9-21AB,U+21B0-21B2,U+21B3-21B6,U+21BA-21BC,U+21D0,U+21D2,U+21D4,U+21DE-21E0,U+21E4-21E6,U+21E7,U+21EA,U+2303,U+2305,U+2318,U+2325-2328,U+232B,U+2380,U+2387,U+238B,U+23CE-23D0,U+2460-2469,U+24B6-24D0,U+24EA,U+25A0-25A3,U+25B2-25B4,U+25B6-25B8,U+25BA-25BE,U+25C0-25C2,U+25C4-25C8,U+25CB,U+25CF,U+25EF,U+2600,U+2605-2607,U+263C,U+2661,U+2665,U+26A0,U+2713,U+2717,U+2756,U+2764,U+2780-2789,U+27F5-27FB,U+2B06,U+2B12-2B14,U+2B1C,U+E000,U+E12B-E164,U+1F130-1F14A,U+1F850,U+1F852;
- font-named-instance: 'Italic';
-}
-
-/* extra */
-@font-face {
- font-family: 'Inter var';
- font-style: italic;
- font-weight: 100 900;
- font-display: swap;
- src: url('Inter-italic.extra.var.woff2') format('woff2');
- unicode-range: U+E000,U+E002-E081,U+E093-E097,U+E0A5-E0E7,U+E0F3-E11D,U+E11E-E165,U+EE01,U+F6C3;
- font-named-instance: 'Italic';
-}
-/* alternates */
-@font-face {
- font-family: 'Inter var';
- font-style: italic;
- font-weight: 100 900;
- font-display: swap;
- src: url('Inter-italic.alternates.var.woff2') format('woff2');
- unicode-range: U+E000,U+E002-E081,U+E093-E097,U+E0A5-E0E7,U+E0F3-E11D,U+E11E-E165,U+EE01,U+F6C3;
- font-named-instance: 'Italic';
-}
-/* symbols */
-@font-face {
- font-family: 'Inter var';
- font-style: italic;
- font-weight: 100 900;
- font-display: swap;
- src: url('Inter-italic.symbols.var.woff2') format('woff2');
- unicode-range: U+20DD-20DF,U+2190-219A,U+21A9-21AB,U+21B0-21B2,U+21B3-21B6,U+21BA-21BC,U+21D0,U+21D2,U+21D4,U+21DE-21E0,U+21E4-21E6,U+21E7,U+21EA,U+2303,U+2305,U+2318,U+2325-2328,U+232B,U+2380,U+2387,U+238B,U+23CE-23D0,U+2460-2469,U+24B6-24D0,U+24EA,U+25A0-25A3,U+25B2-25B4,U+25B6-25B8,U+25BA-25BE,U+25C0-25C2,U+25C4-25C8,U+25CB,U+25CF,U+25EF,U+2600,U+2605-2607,U+263C,U+2661,U+2665,U+26A0,U+2713,U+2717,U+2756,U+2764,U+2780-2789,U+27F5-27FB,U+2B06,U+2B12-2B14,U+2B1C,U+E000,U+E12B-E164,U+1F130-1F14A,U+1F850,U+1F852;
- font-named-instance: 'Italic';
-}
-/* cyrillic */
-@font-face {
- font-family: 'Inter var';
- font-style: italic;
- font-weight: 100 900;
- font-display: swap;
- src: url('Inter-italic.cyrillic.var.woff2') format('woff2');
- unicode-range: U+0400-049E,U+04A0-0500,U+052F,U+20B4,U+2116,U+2DFF,U+A69F;
- font-named-instance: 'Italic';
-}
-/* greek */
-@font-face {
- font-family: 'Inter var';
- font-style: italic;
- font-weight: 100 900;
- font-display: swap;
- src: url('Inter-italic.greek.var.woff2') format('woff2');
- unicode-range: U+0370-0378,U+037A-0380,U+0384-038B,U+038C,U+038E-03A2,U+03A3-03E2,U+03F0-0400,U+1F00-1F16,U+1F18-1F1E,U+1F20-1F46,U+1F48-1F4E,U+1F50-1F58,U+1F59,U+1F5B,U+1F5D,U+1F5F-1F7E,U+1F80-1FB5,U+1FB6-1FC5,U+1FC6-1FD4,U+1FD6-1FDC,U+1FDD-1FF0,U+1FF2-1FF5,U+1FF6-1FFF;
- font-named-instance: 'Italic';
-}
-/* vietnamese */
-@font-face {
- font-family: 'Inter var';
- font-style: italic;
- font-weight: 100 900;
- font-display: swap;
- src: url('Inter-italic.vietnamese.var.woff2') format('woff2');
- unicode-range: U+0102-0104,U+0110-0112,U+0128-012A,U+0168-016A,U+01A0-01A2,U+01AF-01B1,U+1EA0-1EFA,U+20AB;
- font-named-instance: 'Italic';
-}
-/* latin-ext */
-@font-face {
- font-family: 'Inter var';
- font-style: italic;
- font-weight: 100 900;
- font-display: swap;
- src: url('Inter-italic.latin-ext.var.woff2') format('woff2');
- unicode-range: U+0100-0149,U+014A-01C4,U+01C5-0250,U+0259,U+1E00-1F00,U+2020,U+20A0-20AC,U+20AD-20C0,U+2113,U+2C7C,U+2C7F,U+A7FF;
- font-named-instance: 'Italic';
-}
-/* latin */
-@font-face {
- font-family: 'Inter var';
- font-style: italic;
- font-weight: 100 900;
- font-display: swap;
- src: url('Inter-italic.latin.var.woff2') format('woff2');
- unicode-range: U+0000-007F,U+00A0-0100,U+0131,U+0152-0154,U+02BB-02BD,U+02C6,U+02DA,U+02DC,U+2000-200C,U+2010-2028,U+202F-2060,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+FEFF;
- font-named-instance: 'Italic';
-}
-/* extra */
-@font-face {
- font-family: 'Inter var';
- font-style: normal;
- font-weight: 100 900;
- font-display: swap;
- src: url('Inter-roman.extra.var.woff2') format('woff2');
- unicode-range: U+E000,U+E002-E081,U+E093-E097,U+E0A5-E0E7,U+E0F3-E11D,U+E11E-E165,U+EE01,U+F6C3;
- font-named-instance: 'Regular';
-}
-/* alternates */
-@font-face {
- font-family: 'Inter var';
- font-style: normal;
- font-weight: 100 900;
- font-display: swap;
- src: url('Inter-roman.alternates.var.woff2') format('woff2');
- unicode-range: U+E000,U+E002-E081,U+E093-E097,U+E0A5-E0E7,U+E0F3-E11D,U+E11E-E165,U+EE01,U+F6C3;
- font-named-instance: 'Regular';
-}
-/* symbols */
-@font-face {
- font-family: 'Inter var';
- font-style: normal;
- font-weight: 100 900;
- font-display: swap;
- src: url('Inter-roman.symbols.var.woff2') format('woff2');
- unicode-range: U+20DD-20DF,U+2190-219A,U+21A9-21AB,U+21B0-21B2,U+21B3-21B6,U+21BA-21BC,U+21D0,U+21D2,U+21D4,U+21DE-21E0,U+21E4-21E6,U+21E7,U+21EA,U+2303,U+2305,U+2318,U+2325-2328,U+232B,U+2380,U+2387,U+238B,U+23CE-23D0,U+2460-2469,U+24B6-24D0,U+24EA,U+25A0-25A3,U+25B2-25B4,U+25B6-25B8,U+25BA-25BE,U+25C0-25C2,U+25C4-25C8,U+25CB,U+25CF,U+25EF,U+2600,U+2605-2607,U+263C,U+2661,U+2665,U+26A0,U+2713,U+2717,U+2756,U+2764,U+2780-2789,U+27F5-27FB,U+2B06,U+2B12-2B14,U+2B1C,U+E000,U+E12B-E164,U+1F130-1F14A,U+1F850,U+1F852;
- font-named-instance: 'Regular';
-}
-/* cyrillic */
-@font-face {
- font-family: 'Inter var';
- font-style: normal;
- font-weight: 100 900;
- font-display: swap;
- src: url('Inter-roman.cyrillic.var.woff2') format('woff2');
- unicode-range: U+0400-049E,U+04A0-0500,U+052F,U+20B4,U+2116,U+2DFF,U+A69F;
- font-named-instance: 'Regular';
-}
-/* greek */
-@font-face {
- font-family: 'Inter var';
- font-style: normal;
- font-weight: 100 900;
- font-display: swap;
- src: url('Inter-roman.greek.var.woff2') format('woff2');
- unicode-range: U+0370-0378,U+037A-0380,U+0384-038B,U+038C,U+038E-03A2,U+03A3-03E2,U+03F0-0400,U+1F00-1F16,U+1F18-1F1E,U+1F20-1F46,U+1F48-1F4E,U+1F50-1F58,U+1F59,U+1F5B,U+1F5D,U+1F5F-1F7E,U+1F80-1FB5,U+1FB6-1FC5,U+1FC6-1FD4,U+1FD6-1FDC,U+1FDD-1FF0,U+1FF2-1FF5,U+1FF6-1FFF;
- font-named-instance: 'Regular';
-}
-/* vietnamese */
-@font-face {
- font-family: 'Inter var';
- font-style: normal;
- font-weight: 100 900;
- font-display: swap;
- src: url('Inter-roman.vietnamese.var.woff2') format('woff2');
- unicode-range: U+0102-0104,U+0110-0112,U+0128-012A,U+0168-016A,U+01A0-01A2,U+01AF-01B1,U+1EA0-1EFA,U+20AB;
- font-named-instance: 'Regular';
-}
-/* latin-ext */
-@font-face {
- font-family: 'Inter var';
- font-style: normal;
- font-weight: 100 900;
- font-display: swap;
- src: url('Inter-roman.latin-ext.var.woff2') format('woff2');
- unicode-range: U+0100-0149,U+014A-01C4,U+01C5-0250,U+0259,U+1E00-1F00,U+2020,U+20A0-20AC,U+20AD-20C0,U+2113,U+2C7C,U+2C7F,U+A7FF;
- font-named-instance: 'Regular';
-}
-/* latin */
-@font-face {
- font-family: 'Inter var';
- font-style: normal;
- font-weight: 100 900;
- font-display: swap;
- src: url('Inter-roman.latin.var.woff2') format('woff2');
- unicode-range: U+0000-007F,U+00A0-0100,U+0131,U+0152-0154,U+02BB-02BD,U+02C6,U+02DA,U+02DC,U+2000-200C,U+2010-2028,U+202F-2060,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+FEFF;
- font-named-instance: 'Regular';
-}
\ No newline at end of file
diff --git a/lib/generators/tailwindcss/authentication/templates/app/views/passwords/edit.html.erb b/lib/generators/tailwindcss/authentication/templates/app/views/passwords/edit.html.erb
index 707bbe5c..5c989810 100644
--- a/lib/generators/tailwindcss/authentication/templates/app/views/passwords/edit.html.erb
+++ b/lib/generators/tailwindcss/authentication/templates/app/views/passwords/edit.html.erb
@@ -7,11 +7,11 @@
<%%= form_with url: password_path(params[:token]), method: :put, class: "contents" do |form| %>
<div class="my-5">
- <%%= form.password_field :password, required: true, autocomplete: "new-password", placeholder: "Enter new password", maxlength: 72, class: "block shadow rounded-md border border-gray-400 outline-none focus:outline-blue-600 px-3 py-2 mt-2 w-full" %>
+ <%%= form.password_field :password, required: true, autocomplete: "new-password", placeholder: "Enter new password", maxlength: 72, class: "block shadow-sm rounded-md border border-gray-400 outline-hidden focus:outline-blue-600 px-3 py-2 mt-2 w-full" %>
</div>
<div class="my-5">
- <%%= form.password_field :password_confirmation, required: true, autocomplete: "new-password", placeholder: "Repeat new password", maxlength: 72, class: "block shadow rounded-md border border-gray-400 outline-none focus:outline-blue-600 px-3 py-2 mt-2 w-full" %>
+ <%%= form.password_field :password_confirmation, required: true, autocomplete: "new-password", placeholder: "Repeat new password", maxlength: 72, class: "block shadow-sm rounded-md border border-gray-400 outline-hidden focus:outline-blue-600 px-3 py-2 mt-2 w-full" %>
</div>
<div class="inline">
diff --git a/lib/generators/tailwindcss/authentication/templates/app/views/passwords/new.html.erb b/lib/generators/tailwindcss/authentication/templates/app/views/passwords/new.html.erb
index 72c434de..e5862200 100644
--- a/lib/generators/tailwindcss/authentication/templates/app/views/passwords/new.html.erb
+++ b/lib/generators/tailwindcss/authentication/templates/app/views/passwords/new.html.erb
@@ -7,7 +7,7 @@
<%%= form_with url: passwords_path, class: "contents" do |form| %>
<div class="my-5">
- <%%= form.email_field :email_address, required: true, autofocus: true, autocomplete: "username", placeholder: "Enter your email address", value: params[:email_address], class: "block shadow rounded-md border border-gray-400 outline-none focus:outline-blue-600 px-3 py-2 mt-2 w-full" %>
+ <%%= form.email_field :email_address, required: true, autofocus: true, autocomplete: "username", placeholder: "Enter your email address", value: params[:email_address], class: "block shadow-sm rounded-md border border-gray-400 outline-hidden focus:outline-blue-600 px-3 py-2 mt-2 w-full" %>
</div>
<div class="inline">
diff --git a/lib/generators/tailwindcss/authentication/templates/app/views/sessions/new.html.erb b/lib/generators/tailwindcss/authentication/templates/app/views/sessions/new.html.erb
index 92d64b79..64c145c0 100644
--- a/lib/generators/tailwindcss/authentication/templates/app/views/sessions/new.html.erb
+++ b/lib/generators/tailwindcss/authentication/templates/app/views/sessions/new.html.erb
@@ -11,11 +11,11 @@
<%%= form_with url: session_url, class: "contents" do |form| %>
<div class="my-5">
- <%%= form.email_field :email_address, required: true, autofocus: true, autocomplete: "username", placeholder: "Enter your email address", value: params[:email_address], class: "block shadow rounded-md border border-gray-400 focus:outline-blue-600 px-3 py-2 mt-2 w-full" %>
+ <%%= form.email_field :email_address, required: true, autofocus: true, autocomplete: "username", placeholder: "Enter your email address", value: params[:email_address], class: "block shadow-sm rounded-md border border-gray-400 focus:outline-blue-600 px-3 py-2 mt-2 w-full" %>
</div>
<div class="my-5">
- <%%= form.password_field :password, required: true, autocomplete: "current-password", placeholder: "Enter your password", maxlength: 72, class: "block shadow rounded-md border border-gray-400 focus:outline-blue-600 px-3 py-2 mt-2 w-full" %>
+ <%%= form.password_field :password, required: true, autocomplete: "current-password", placeholder: "Enter your password", maxlength: 72, class: "block shadow-sm rounded-md border border-gray-400 focus:outline-blue-600 px-3 py-2 mt-2 w-full" %>
</div>
<div class="col-span-6 sm:flex sm:items-center sm:gap-4">
diff --git a/lib/generators/tailwindcss/scaffold/templates/_form.html.erb.tt b/lib/generators/tailwindcss/scaffold/templates/_form.html.erb.tt
index 93490a15..9e392609 100644
--- a/lib/generators/tailwindcss/scaffold/templates/_form.html.erb.tt
+++ b/lib/generators/tailwindcss/scaffold/templates/_form.html.erb.tt
@@ -15,23 +15,23 @@
<div class="my-5">
<% if attribute.password_digest? -%>
<%%= form.label :password %>
- <%%= form.password_field :password, class: ["block shadow rounded-md border outline-none px-3 py-2 mt-2 w-full", {"border-gray-400 focus:outline-blue-600": <%= model_resource_name %>.errors[:password].none?, "border-red-400 focus:outline-red-600": <%= model_resource_name %>.errors[:password].any?}] %>
+ <%%= form.password_field :password, class: ["block shadow-sm rounded-md border outline-hidden px-3 py-2 mt-2 w-full", {"border-gray-400 focus:outline-blue-600": <%= model_resource_name %>.errors[:password].none?, "border-red-400 focus:outline-red-600": <%= model_resource_name %>.errors[:password].any?}] %>
</div>
<div class="my-5">
<%%= form.label :password_confirmation %>
- <%%= form.password_field :password_confirmation, class: ["block shadow rounded-md border outline-none px-3 py-2 mt-2 w-full", {"border-gray-400 focus:outline-blue-600": <%= model_resource_name %>.errors[:password_confirmation].none?, "border-red-400 focus:outline-red-600": <%= model_resource_name %>.errors[:password_confirmation].any?}] %>
+ <%%= form.password_field :password_confirmation, class: ["block shadow-sm rounded-md border outline-hidden px-3 py-2 mt-2 w-full", {"border-gray-400 focus:outline-blue-600": <%= model_resource_name %>.errors[:password_confirmation].none?, "border-red-400 focus:outline-red-600": <%= model_resource_name %>.errors[:password_confirmation].any?}] %>
<% elsif attribute.attachments? -%>
<%%= form.label :<%= attribute.column_name %> %>
- <%%= form.<%= attribute.field_type %> :<%= attribute.column_name %>, multiple: true, class: ["block shadow rounded-md border outline-none px-3 py-2 mt-2 w-full", {"border-gray-400 focus:outline-blue-600": <%= model_resource_name %>.errors[:password].none?, "border-red-400 focus:outline-red-600": <%= model_resource_name %>.errors[:password].any?}] %>
+ <%%= form.<%= attribute.field_type %> :<%= attribute.column_name %>, multiple: true, class: ["block shadow-sm rounded-md border outline-hidden px-3 py-2 mt-2 w-full", {"border-gray-400 focus:outline-blue-600": <%= model_resource_name %>.errors[:password].none?, "border-red-400 focus:outline-red-600": <%= model_resource_name %>.errors[:password].any?}] %>
<% else -%>
<%%= form.label :<%= attribute.column_name %> %>
<% if attribute.field_type == :textarea || attribute.field_type == :text_area -%>
- <%%= form.<%= attribute.field_type %> :<%= attribute.column_name %>, rows: 4, class: ["block shadow rounded-md border outline-none px-3 py-2 mt-2 w-full", {"border-gray-400 focus:outline-blue-600": <%= model_resource_name %>.errors[:<%= attribute.column_name %>].none?, "border-red-400 focus:outline-red-600": <%= model_resource_name %>.errors[:<%= attribute.column_name %>].any?}] %>
+ <%%= form.<%= attribute.field_type %> :<%= attribute.column_name %>, rows: 4, class: ["block shadow-sm rounded-md border outline-hidden px-3 py-2 mt-2 w-full", {"border-gray-400 focus:outline-blue-600": <%= model_resource_name %>.errors[:<%= attribute.column_name %>].none?, "border-red-400 focus:outline-red-600": <%= model_resource_name %>.errors[:<%= attribute.column_name %>].any?}] %>
<% elsif attribute.field_type == :checkbox || attribute.field_type == :check_box -%>
- <%%= form.<%= attribute.field_type %> :<%= attribute.column_name %>, class: ["block shadow rounded-md border outline-none mt-2 h-5 w-5", {"border-gray-400 focus:outline-blue-600": <%= model_resource_name %>.errors[:<%= attribute.column_name %>].none?, "border-red-400 focus:outline-red-600": <%= model_resource_name %>.errors[:<%= attribute.column_name %>].any?}] %>
+ <%%= form.<%= attribute.field_type %> :<%= attribute.column_name %>, class: ["block shadow-sm rounded-md border outline-hidden mt-2 h-5 w-5", {"border-gray-400 focus:outline-blue-600": <%= model_resource_name %>.errors[:<%= attribute.column_name %>].none?, "border-red-400 focus:outline-red-600": <%= model_resource_name %>.errors[:<%= attribute.column_name %>].any?}] %>
<% else -%>
- <%%= form.<%= attribute.field_type %> :<%= attribute.column_name %>, class: ["block shadow rounded-md border outline-none px-3 py-2 mt-2 w-full", {"border-gray-400 focus:outline-blue-600": <%= model_resource_name %>.errors[:<%= attribute.column_name %>].none?, "border-red-400 focus:outline-red-600": <%= model_resource_name %>.errors[:<%= attribute.column_name %>].any?}] %>
+ <%%= form.<%= attribute.field_type %> :<%= attribute.column_name %>, class: ["block shadow-sm rounded-md border outline-hidden px-3 py-2 mt-2 w-full", {"border-gray-400 focus:outline-blue-600": <%= model_resource_name %>.errors[:<%= attribute.column_name %>].none?, "border-red-400 focus:outline-red-600": <%= model_resource_name %>.errors[:<%= attribute.column_name %>].any?}] %>
<% end -%>
<% end -%>
</div>
diff --git a/lib/install/application.tailwind.css b/lib/install/application.tailwind.css
index 8666d2f3..f1d8c73c 100644
--- a/lib/install/application.tailwind.css
+++ b/lib/install/application.tailwind.css
@@ -1,13 +1 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-/*
-
-@layer components {
- .btn-primary {
- @apply py-2 px-4 bg-blue-200;
- }
-}
-
-*/
+@import "tailwindcss";
diff --git a/lib/install/tailwind.config.js b/lib/install/tailwind.config.js
deleted file mode 100644
index c3deef14..00000000
--- a/lib/install/tailwind.config.js
+++ /dev/null
@@ -1,22 +0,0 @@
-const defaultTheme = require('tailwindcss/defaultTheme')
-
-module.exports = {
- content: [
- './public/*.html',
- './app/helpers/**/*.rb',
- './app/javascript/**/*.js',
- './app/views/**/*.{erb,haml,html,slim}'
- ],
- theme: {
- extend: {
- fontFamily: {
- sans: ['Inter var', ...defaultTheme.fontFamily.sans],
- },
- },
- },
- plugins: [
- // require('@tailwindcss/forms'),
- // require('@tailwindcss/typography'),
- // require('@tailwindcss/container-queries'),
- ]
-}
diff --git a/lib/install/tailwindcss.rb b/lib/install/tailwindcss.rb
index 2c2ba50c..61fe3fac 100644
--- a/lib/install/tailwindcss.rb
+++ b/lib/install/tailwindcss.rb
@@ -4,7 +4,7 @@
if APPLICATION_LAYOUT_PATH.exist?
say "Add Tailwindcss include tags and container element in application layout"
insert_into_file APPLICATION_LAYOUT_PATH.to_s, <<~ERB.indent(4), before: /^\s*<%= stylesheet_link_tag/
- <%= stylesheet_link_tag "tailwind", "inter-font", "data-turbo-track": "reload" %>
+ <%= stylesheet_link_tag "tailwind", "data-turbo-track": "reload" %>
ERB
if File.open(APPLICATION_LAYOUT_PATH).read =~ /<body>\n\s*<%= yield %>\n\s*<\/body>/
@@ -13,7 +13,7 @@
end
else
say "Default application.html.erb is missing!", :red
- say %( Add <%= stylesheet_link_tag "tailwind", "inter-font", "data-turbo-track": "reload" %> within the <head> tag in your custom layout.)
+ say %( Add <%= stylesheet_link_tag "tailwind", "data-turbo-track": "reload" %> within the <head> tag in your custom layout.)
end
say "Build into app/assets/builds"
@@ -28,11 +28,6 @@
append_to_file(".gitignore", %(\n/app/assets/builds/*\n!/app/assets/builds/.keep\n))
end
-unless Rails.root.join("config/tailwind.config.js").exist?
- say "Add default config/tailwindcss.config.js"
- copy_file "#{__dir__}/tailwind.config.js", "config/tailwind.config.js"
-end
-
unless Rails.root.join("app/assets/stylesheets/application.tailwind.css").exist?
say "Add default app/assets/stylesheets/application.tailwind.css"
copy_file "#{__dir__}/application.tailwind.css", "app/assets/stylesheets/application.tailwind.css"
diff --git a/lib/tailwindcss/commands.rb b/lib/tailwindcss/commands.rb
index 40d983a6..ce08bb38 100644
--- a/lib/tailwindcss/commands.rb
+++ b/lib/tailwindcss/commands.rb
@@ -10,7 +10,6 @@ def compile_command(debug: false, **kwargs)
Tailwindcss::Ruby.executable(**kwargs),
"-i", rails_root.join("app/assets/stylesheets/application.tailwind.css").to_s,
"-o", rails_root.join("app/assets/builds/tailwind.css").to_s,
- "-c", rails_root.join("config/tailwind.config.js").to_s,
]
command << "--minify" unless (debug || rails_css_compressor?)
diff --git a/lib/tailwindcss/engine.rb b/lib/tailwindcss/engine.rb
index 4b9b9fdc..080416c4 100644
--- a/lib/tailwindcss/engine.rb
+++ b/lib/tailwindcss/engine.rb
@@ -2,10 +2,6 @@
module Tailwindcss
class Engine < ::Rails::Engine
- initializer "tailwindcss.assets" do
- Rails.application.config.assets.precompile += %w( inter-font.css )
- end
-
initializer "tailwindcss.disable_generator_stylesheets" do
Rails.application.config.generators.stylesheets = false
end
diff --git a/tailwindcss-rails.gemspec b/tailwindcss-rails.gemspec
index 8d893029..0b31c4a8 100644
--- a/tailwindcss-rails.gemspec
+++ b/tailwindcss-rails.gemspec
@@ -19,5 +19,5 @@ Gem::Specification.new do |spec|
spec.files = Dir["{app,lib}/**/*", "MIT-LICENSE", "Rakefile", "README.md"]
spec.add_dependency "railties", ">= 7.0.0"
- spec.add_dependency "tailwindcss-ruby"
+ spec.add_dependency "tailwindcss-ruby", "~> 4.0"
end
diff --git a/test/integration/user_journey_test.sh b/test/integration/user_journey_test.sh
index 14f4597a..985b72c4 100755
--- a/test/integration/user_journey_test.sh
+++ b/test/integration/user_journey_test.sh
@@ -9,7 +9,7 @@ set -eux
rm -f Gemfile.lock
bundle remove actionmailer
bundle add rails --skip-install ${RAILSOPTS:-}
-bundle install
+bundle install --prefer-local
# do our work a directory with spaces in the name (#176, #184)
rm -rf "My Workspace"
@@ -27,17 +27,10 @@ bundle add rails --skip-install ${RAILSOPTS:-}
# use the tailwindcss-rails under test
bundle add tailwindcss-rails --skip-install --path="../.."
-bundle add tailwindcss-ruby --skip-install ${TAILWINDCSSOPTS:-}
-bundle install
+bundle install --prefer-local
bundle show --paths
bundle binstubs --all
-if bundle show | fgrep tailwindcss-ruby | fgrep -q "(4." ; then
- TAILWIND4=1
-else
- TAILWIND4=0
-fi
-
# install tailwindcss
bin/rails tailwindcss:install
@@ -51,12 +44,9 @@ task :still_here do
end
EOF
-if [[ $TAILWIND4 = 1 ]] ; then
- cat > app/assets/stylesheets/application.tailwind.css <<EOF
-@import "tailwindcss";
+cat >> app/assets/stylesheets/application.tailwind.css <<EOF
@theme { --color-special: #abc12399; }
EOF
-fi
bin/rails tailwindcss:build still_here | grep "Rake process did not exit early"
@@ -74,9 +64,7 @@ grep -q "Show this post" app/views/posts/index.html.erb
bin/rails tailwindcss:build[verbose]
grep -q "py-2" app/assets/builds/tailwind.css
-if [[ $TAILWIND4 = 1 ]] ; then
- # TEST: contents include application.tailwind.css
- grep -q "#abc12399" app/assets/builds/tailwind.css
-fi
+# TEST: contents include application.tailwind.css
+grep -q "#abc12399" app/assets/builds/tailwind.css
echo "OK"
diff --git a/test/lib/tailwindcss/commands_test.rb b/test/lib/tailwindcss/commands_test.rb
index 1ec6ce2b..60c073ed 100644
--- a/test/lib/tailwindcss/commands_test.rb
+++ b/test/lib/tailwindcss/commands_test.rb
@@ -15,7 +15,6 @@ def setup
assert_kind_of(Array, actual)
assert_equal(executable, actual.first)
assert_includes(actual, "-i")
- assert_includes(actual, "-c")
assert_includes(actual, "-o")
end
end