Installation should assume Tailwind CSS v4

[flavorjones]

When running "rails tailwindcss:install", the resulting application does not apply styles with tailwindcss-ruby v4.0.0.

I think what needs to happen is:

• bump dependency to tailwindcss-ruby ~> 4.0 in the gemspec
• drop the config file and move it into application.tailwind.css
• add anything that the @tailwindcss/upgrade@next injects into application.tailwind.css for any of our generated views
• drop the Inter font (see Remove Inter font assets from inclusion in downstream projects #353)
• bump the major version of this gem to v4 (a happy coincidence)

[EricGusmao]

@flavorjones You can assign me this one if you wish, i can solve it :)

[flavorjones]

@EricGusmao thanks for offering. If you want to start a PR that would be great. I'm also working on one because I have some learning to do, but if you know what you're doing I would appreciate the help.

(Please don't bump the gem version in the PR though.)

[EricGusmao]

@flavorjones ok, I'm going to start working on it right now. I also added some observations I discovered at #450

[drale2k]

Hi guys,

is there already an upgrade path to v4? I tried running the upgrade script manually but it errors out:

npx @tailwindcss/upgrade@next --config config/tailwind.config.js

 Searching for CSS files in the current directory and its subdirectories… 

│ ↳ Failed to resolve import: `tailwindcss` in `./application.tailwind.css`. Skipping. 

│ ↳ Linked `./config/tailwind.config.js` to `./app/assets/stylesheets/application.tailwind.css` 

│ Migrating JavaScript configuration files… 

│ ↳ Could not load the configuration file: Cannot find module 'tailwindcss/defaultTheme' 
│   Require stack: 
│   - /Users/myfolder/data/code/config/tailwind.config.js 

It seems to have an issue with defaultTheme coming from my tailwind config which i believe is default.

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', ...defaultTheme.fontFamily.sans]
      },
      colors: {
        tertiary: '#737373'
      }
    }
  },
  plugins: [
    ... list here
  ]
}

Should i open a separate issue for this?

[EricGusmao]

Hi @drale2k! Please, go to #450 for help, questions, and discussion. As @flavorjones mentioned in #462 (comment). Thank you!