Rails how reload tailwind new components?

[coopeu]

app/javascript/css/javascript.js `` @import "tailwindcss/base"; @import "tailwindcss/components"; @import "tailwindcss/utilities"; @tailwind preflight; @tailwind components; .btn-teal { @apply inline-block bg-teal-800 text-white px-6 py-4 rounded shadow border border-teal-600; } .btn-teal:hover { @apply hover:font-bolt hover:no-underline hover:border hover:border-teal-300; } @tailwind utilities;

I'have created dos components news for stylising a button simple using class: "btn-teal" on my home.html.erb views file.

How restart tailwind for loading this new class? apache restart, rails restart, bin/webpack,...

app/javascript/application.js

import "../css/application.css" import "src/application.css" //import "subscriptions.js" import "controllers" import 'initializers/turbolinks.js' require("@rails/ujs").start() require("turbolinks").start() require("@rails/activestorage").start() require("channels") require("stylesheets/application.scss") document.addEventListener("turbolinks:load", () => { flatpickr("[data-behavior='flatpickr']", { altInput: true, altFormat: "F j, Y", dateFormat: "Y-m-d", }) })

Thanks in advance!

[hacknug]

Has barrejat massa coses.

You're using some deprecated things (@tailwind preflight; from v0.x) with @import "tailwindcss/base"; from v1.x. You should use @tailwind by default unless you've added postcss-import to your postcss.config.js.

It also looks like you have all that in a js file? (app/javascript/css/javascript.js) That should go inside a .css file (or .scss, .pcss or whatever other extension you might prefer or need depending on your tooling). Also you can't use @apply with variants that contain pseudo-classes.

Please take a look at the docs where most of this stuff (if not all of it) is covered. If you still have issues setting things up, a link to a repo someone can clone would probably make it easier for people to help you 👍

[coopeu]

Thanks @hacknug although you were an infiltrated Mariano Rajoi PP 1) Just corrected the deprecated issue. When I'm changing or creating a new component at app/javascript/css/applicatrion.css how do you load this to be visible in the views? Is this new component packed automatically for taking effect in the html file? 2) into /tailwind.config.js To extend the gray theme: { colors: { 900: '#1a202c', 026: '#020202', but calling this class='text-gray-026' is not working. How can I extend the available colors catalogues from 100 to 900?

[hacknug]

1. I have no idea what your stack looks like so I can't answer this question. If you're using Vue or React or something like that, you'll need to import the file on your app. If not, maybe use the old-school link for that?

2. You need to put that under the correct key. If you want .text-gray-026 { color: #020202 } it should be:

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        gray: {
          026: '#020202',
          900: '#1a202c',
        },
      },
    },
  },
}

[coopeu]

Thanks hacknug again! 1) I'm starting doing some little samples of vue.js following tutorials. The App is basically pure RoR. I'm trying to migrate MilRevolts.life (semantic-ui) to MilRevolts.com (Tailwind) looking for a more easy coding and more mobile-friendly. 2) Repository is available at https://git.hub/coopeu/MilRevolts.com I appreciate a lot your support.