Get 2024 Templates Mega Bundle!$1000 worth of 19 Bootstrap HTML, Vue & React Templates + 3 Vector Sets for just $99
Get for 99$

Can you help me on how to install metronic tailwind theme on rails?


I'm having problems because there is no installation file. Can you help me?


Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(

Replies (3)


Hi

Open Metronic Tailwind HTML folder

/metronic-v9.0.4/metronic-tailwind-html/webpack.config.js
Copy the tailwind.config.js file from the Metronic HTML folder.

Add the following to your Rails file app/javascript/stylesheets/application.scss file:

@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";


3. You’ll need to copy the relevant CSS and assets from the Metronic Tailwind theme into your Rails project.
From here: /metronic-v9.0.4/metronic-tailwind-html/dist/assets

Place the Metronic CSS files into app/javascript/stylesheets/ or include them in the application.scss file. Metronic provides a compiled Tailwind CSS file in dist/assets.
Move any JavaScript or other assets (like images or fonts) into appropriate folders within app/javascript/ or app/assets/.

4. Configure Layout Files
Update your Rails views (app/views/layouts/application.html.erb) to include the correct HTML structure from Metronic’s theme. Copy the HTML layout and paste it inside your Rails layout files. Properly link the CSS and JS files by using Rails’ asset pipeline.



Hi,

Please note that there aren't any installation docs for Rails available at the moment.

In the meantime, are you able to create a new Rails project on your own? You can follow this guide to get started:
https://guides.rubyonrails.org/getting_started.html#creating-a-new-rails-project

Thank you



Hi

At the moment, there are no installation docs for Rails yet. Here’s a general process you can use:

1. Extract the contents of the theme files locally.

2. First, you must set up Tailwind in your Rails app. Follow these steps to create Rails project.

Run the following command in your Rails application folder to install Tailwind:

rails new myapp
cd myapp
rails webpacker:install


Copy the tailwind.config.js file from the Metronic HTML folder.

Add the following to your app/javascript/stylesheets/application.scss file:

@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

3. You’ll need to copy the relevant CSS and assets from the Metronic Tailwind theme into your Rails project.

Place the Metronic CSS files into app/javascript/stylesheets/ or include them in the application.scss file. Metronic provides a compiled Tailwind CSS file in dist/assets.
Move any JavaScript or other assets (like images or fonts) into appropriate folders within app/javascript/ or app/assets/.

4. Configure Layout Files
Update your Rails views (app/views/layouts/application.html.erb) to include the correct HTML structure from Metronic’s theme. Copy the HTML layout and paste it inside your Rails layout files. Properly link the CSS and JS files by using Rails’ asset pipeline.


Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(