├── LICENSE ├── README.md └── bridgetown.automation.rb /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2022 Bridgetown Contributors 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # tailwindcss-automation 2 | 3 | An automation for installing [TailwindCSS](https://tailwindcss.com) in a [Bridgetown](https://www.bridgetownrb.com) site. 4 | 5 | In your Bridgetown project folder, run: 6 | 7 | ``` 8 | bin/bridgetown apply https://github.com/bridgetownrb/tailwindcss-automation 9 | ``` 10 | 11 | (Note: it will overwrite any existing `postcss.config.js` file in your repo.) 12 | 13 | You can also apply the automation when creating a new site: 14 | 15 | ``` 16 | bridgetown new mysite --apply=https://github.com/bridgetownrb/tailwindcss-automation 17 | ``` 18 | 19 | The automation will add Tailwind to your `package.json`, set up a default Tailwind config, add the import statements to your frontend CSS entrypoint, and add a builder which will detect when content in `src` is modified and trigger Tailwind's JIT compiler to run. 20 | 21 | Any questions? [Check out the Bridgetown community discussion channels for help.](https://www.bridgetownrb.com/community) 22 | 23 | ---- 24 | 25 | ## Future Compatibility Message 26 | 27 | The Tailwind automation used to be a configuration option bundled with Bridgetown, but it has since been extracted to this community-maintained repository. I ([@jaredcwhite](https://github.com/jaredcwhite)) do not use or endorse Tailwind, but I'm happy to accept PRs to keep the automation working in case a future version of Tailwind breaks the script in some way. Thanks! 28 | -------------------------------------------------------------------------------- /bridgetown.automation.rb: -------------------------------------------------------------------------------- 1 | # frozen_string_literal: true 2 | 3 | say_status :tailwind, "Installing Tailwind CSS..." 4 | 5 | confirm = ask "This configuration will ovewrite your existing #{"postcss.config.js".bold.white}. Would you like to continue? [Yn]" 6 | return unless confirm.casecmp?("Y") 7 | 8 | run "npm install tailwindcss @tailwindcss/postcss --save-dev" 9 | 10 | create_file "postcss.config.js", <<~JS, force: true 11 | export default { 12 | plugins: { 13 | '@tailwindcss/postcss': {}, 14 | 'postcss-flexbugs-fixes': {}, 15 | 'postcss-preset-env': { 16 | autoprefixer: { 17 | flexbox: 'no-2009' 18 | }, 19 | stage: 3 20 | } 21 | } 22 | } 23 | JS 24 | 25 | css_imports = <<~CSS 26 | /* If you need to add @import statements, do so up here */ 27 | 28 | @import "jit-refresh.css"; /* triggers frontend rebuilds */ 29 | 30 | /* Set up Tailwind imports */ 31 | @import "tailwindcss"; 32 | 33 | CSS 34 | 35 | if File.exist?("frontend/styles/index.css") 36 | prepend_to_file "frontend/styles/index.css", css_imports 37 | else 38 | say "\nPlease add the following lines to your CSS index file:" 39 | say css_imports 40 | end 41 | 42 | create_file "frontend/styles/jit-refresh.css", "/* #{Time.now.to_i} */" 43 | 44 | insert_into_file "Rakefile", 45 | after: %r{ task :(build|dev) do\n} do 46 | <<-JS 47 | sh "touch frontend/styles/jit-refresh.css" 48 | JS 49 | end 50 | 51 | if File.exist?(".gitignore") 52 | append_to_file ".gitignore" do 53 | <<~FILES 54 | 55 | frontend/styles/jit-refresh.css 56 | FILES 57 | end 58 | end 59 | 60 | create_builder "tailwind_jit.rb" do 61 | <<~'RUBY' 62 | class Builders::TailwindJit < SiteBuilder 63 | def build 64 | return if ARGV.include?("--skip-tw-jit") 65 | 66 | fast_refreshing = false 67 | 68 | hook :site, :fast_refresh do 69 | fast_refreshing = true 70 | end 71 | 72 | hook :site, :post_write do 73 | if fast_refreshing 74 | fast_refreshing = false 75 | Thread.new do 76 | sleep 0.75 77 | refresh_file = site.in_root_dir("frontend", "styles", "jit-refresh.css") 78 | File.write refresh_file, "/* #{Time.now.to_i} */" 79 | end 80 | end 81 | end 82 | end 83 | end 84 | RUBY 85 | end 86 | 87 | say_status :tailwind, "Tailwind CSS is now configured." 88 | --------------------------------------------------------------------------------