Lucky - TailwindCSS

Public

Install TailwindCSS in a Lucky Application

Used 215 times

• Created by

S Stephen Dolan

Usage

From within a Lucky application with the bloat gem installed, run:

bloat with https://railsbytes.com/script/VeKsGg

Run this command in your Rails app directory in the terminal:

rails app:template LOCATION="https://railsbytes.com/script/VeKsGg"

Template Source

Review the code before running this template on your machine.

def yarn(*packages)
  run("yarn add #{packages.join(" ")}")
end

def init_tailwind
  create_file "src/css/tailwind.config.js" do
    <<~EOF
    module.exports = {
       purge: [
        "./src/css/**/*.scss",
        "./src/pages/**/*.cr",
        "./src/components/**/*.cr",
      ],
      theme: {
        extend: {},
      },
      variants: {},
      plugins: [],
    };
    EOF
  end
end

# Add StimulusJS to package.json
yarn "tailwindcss"

# Create the TailwindCSS configuration file
init_tailwind

insert_into_file "webpack.mix.js", after: "let plugins = [];\n" do
  <<~EOF
    const tailwindcss = require("tailwindcss");
  EOF
end

insert_into_file "webpack.mix.js", after: "imgLoaderOptions: { enabled: false },\n" do
  <<-EOF
    processCssUrls: false,
    postCss: [ tailwindcss("./src/css/tailwind.config.js") ],
  EOF
end

prepend_to_file "src/css/app.scss" do
  <<~EOF
    @import "tailwindcss/base";

    @import "tailwindcss/components";

    @import "tailwindcss/utilities";
  EOF
end

Comments

Sign up or Login to leave a comment.