{"id":94137,"date":"2025-01-22T20:31:49","date_gmt":"2025-01-22T17:01:49","guid":{"rendered":"https:\/\/nabfollower.com\/blog\/ruby-on-rails-8-fast-frontend-%d8%a8%d8%a7-%d8%a7%d8%b3%d8%aa%d9%81%d8%a7%d8%af%d9%87-%d8%a7%d8%b2-tailwind-%d8%a8%d9%87-%d8%b9%d9%86%d9%88%d8%a7%d9%86-%db%8c%da%a9-%da%86%d8%a7%d8%b1%da%86%d9%88\/"},"modified":"2025-01-22T20:31:49","modified_gmt":"2025-01-22T17:01:49","slug":"ruby-on-rails-8-fast-frontend-%d8%a8%d8%a7-%d8%a7%d8%b3%d8%aa%d9%81%d8%a7%d8%af%d9%87-%d8%a7%d8%b2-tailwind-%d8%a8%d9%87-%d8%b9%d9%86%d9%88%d8%a7%d9%86-%db%8c%da%a9-%da%86%d8%a7%d8%b1%da%86%d9%88","status":"publish","type":"post","link":"https:\/\/nabfollower.com\/blog\/ruby-on-rails-8-fast-frontend-%d8%a8%d8%a7-%d8%a7%d8%b3%d8%aa%d9%81%d8%a7%d8%af%d9%87-%d8%a7%d8%b2-tailwind-%d8%a8%d9%87-%d8%b9%d9%86%d9%88%d8%a7%d9%86-%db%8c%da%a9-%da%86%d8%a7%d8%b1%da%86%d9%88\/","title":{"rendered":"Ruby on Rails 8 &#8211; Fast Frontend \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 Tailwind \u0628\u0647 \u0639\u0646\u0648\u0627\u0646 \u06cc\u06a9 \u0686\u0627\u0631\u0686\u0648\u0628 CSS \u0628\u062f\u0648\u0646 \u06a9\u0644\u0627\u0633"},"content":{"rendered":"<div data-article-id=\"2233909\" id=\"article-body\">\n<blockquote>\n<p>\u0627\u06cc\u0646 \u0645\u0642\u0627\u0644\u0647 \u0628\u0647 \u0639\u0645\u062f \u0628\u0633\u06cc\u0627\u0631 \u0634\u0628\u06cc\u0647 \u0628\u0647 \u0645\u0642\u0627\u0644\u0627\u062a \u0642\u0628\u0644\u06cc \u0627\u06cc\u0646 \u0645\u062c\u0645\u0648\u0639\u0647 \u0627\u0633\u062a\u060c \u0627\u0645\u0627 \u0627\u06cc\u0646 \u0628\u0627\u0631 \u0627\u0632 \u0641\u0631\u06cc\u0645 \u0648\u0631\u06a9 Tailwind \u0628\u0647 \u0639\u0646\u0648\u0627\u0646 \u06cc\u06a9 \u0641\u0631\u06cc\u0645\u0648\u0631\u06a9 \u0628\u062f\u0648\u0646 \u06a9\u0644\u0627\u0633 css \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u062e\u0648\u0627\u0647\u06cc\u0645 \u06a9\u0631\u062f. \u0627\u0632 \u0645\u0642\u0627\u0644\u0647 CSS \u0628\u062f\u0648\u0646 \u06a9\u0644\u0627\u0633 \u0628\u0631 \u0627\u0633\u0627\u0633 Tailwind \u0627\u0644\u0647\u0627\u0645 \u06af\u0631\u0641\u062a\u0647 \u0634\u062f\u0647 \u0627\u0633\u062a<\/p>\n<\/blockquote>\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_84 counter-hierarchy ez-toc-counter-rtl ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">\u0641\u0647\u0631\u0633\u062a \u0645\u0637\u0627\u0644\u0628<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/nabfollower.com\/blog\/ruby-on-rails-8-fast-frontend-%d8%a8%d8%a7-%d8%a7%d8%b3%d8%aa%d9%81%d8%a7%d8%af%d9%87-%d8%a7%d8%b2-tailwind-%d8%a8%d9%87-%d8%b9%d9%86%d9%88%d8%a7%d9%86-%db%8c%da%a9-%da%86%d8%a7%d8%b1%da%86%d9%88\/#%DB%8C%DA%A9_%D8%A8%D8%B1%D9%86%D8%A7%D9%85%D9%87_%D8%AC%D8%AF%DB%8C%D8%AF_Rails_%D8%B1%D8%A7_%D8%B4%D8%B1%D9%88%D8%B9_%DA%A9%D9%86%DB%8C%D8%AF\" >\u06cc\u06a9 \u0628\u0631\u0646\u0627\u0645\u0647 \u062c\u062f\u06cc\u062f Rails \u0631\u0627 \u0634\u0631\u0648\u0639 \u06a9\u0646\u06cc\u062f<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/nabfollower.com\/blog\/ruby-on-rails-8-fast-frontend-%d8%a8%d8%a7-%d8%a7%d8%b3%d8%aa%d9%81%d8%a7%d8%af%d9%87-%d8%a7%d8%b2-tailwind-%d8%a8%d9%87-%d8%b9%d9%86%d9%88%d8%a7%d9%86-%db%8c%da%a9-%da%86%d8%a7%d8%b1%da%86%d9%88\/#%D9%BE%D8%B1%D9%88%DA%98%D9%87_%D8%B1%D8%A7_%D8%A8%D8%A7_VSCode_%DB%8C%D8%A7_%D9%88%DB%8C%D8%B1%D8%A7%DB%8C%D8%B4%DA%AF%D8%B1_%D8%AF%D9%84%D8%AE%D9%88%D8%A7%D9%87_%D8%AE%D9%88%D8%AF_%D8%A8%D8%A7%D8%B2_%DA%A9%D9%86%DB%8C%D8%AF\" >\u067e\u0631\u0648\u0698\u0647 \u0631\u0627 \u0628\u0627 VSCode \u06cc\u0627 \u0648\u06cc\u0631\u0627\u06cc\u0634\u06af\u0631 \u062f\u0644\u062e\u0648\u0627\u0647 \u062e\u0648\u062f \u0628\u0627\u0632 \u06a9\u0646\u06cc\u062f<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/nabfollower.com\/blog\/ruby-on-rails-8-fast-frontend-%d8%a8%d8%a7-%d8%a7%d8%b3%d8%aa%d9%81%d8%a7%d8%af%d9%87-%d8%a7%d8%b2-tailwind-%d8%a8%d9%87-%d8%b9%d9%86%d9%88%d8%a7%d9%86-%db%8c%da%a9-%da%86%d8%a7%d8%b1%da%86%d9%88\/#%D8%A7%DB%8C%D8%AC%D8%A7%D8%AF_%DA%86%D9%86%D8%AF_%D8%B5%D9%81%D8%AD%D9%87_%D8%A8%D8%B1%D8%A7%DB%8C_%D8%AA%D8%AC%D8%B3%D9%85_%D8%A7%D8%B3%D8%AA%D8%A7%DB%8C%D9%84_%D8%B9%D9%86%D8%A7%D8%B5%D8%B1_HTML\" >\u0627\u06cc\u062c\u0627\u062f \u0686\u0646\u062f \u0635\u0641\u062d\u0647 \u0628\u0631\u0627\u06cc \u062a\u062c\u0633\u0645 \u0627\u0633\u062a\u0627\u06cc\u0644 \u0639\u0646\u0627\u0635\u0631 HTML<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/nabfollower.com\/blog\/ruby-on-rails-8-fast-frontend-%d8%a8%d8%a7-%d8%a7%d8%b3%d8%aa%d9%81%d8%a7%d8%af%d9%87-%d8%a7%d8%b2-tailwind-%d8%a8%d9%87-%d8%b9%d9%86%d9%88%d8%a7%d9%86-%db%8c%da%a9-%da%86%d8%a7%d8%b1%da%86%d9%88\/#%D9%81%D8%A7%DB%8C%D9%84_Tailwind_%D8%B1%D8%A7_%D8%AA%D8%BA%DB%8C%DB%8C%D8%B1_%D8%AF%D9%87%DB%8C%D8%AF_appassetsstylesheetsapplicationtailwindcss\" >\u0641\u0627\u06cc\u0644 Tailwind \u0631\u0627 \u062a\u063a\u06cc\u06cc\u0631 \u062f\u0647\u06cc\u062f app\/assets\/stylesheets\/application.tailwind.css<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/nabfollower.com\/blog\/ruby-on-rails-8-fast-frontend-%d8%a8%d8%a7-%d8%a7%d8%b3%d8%aa%d9%81%d8%a7%d8%af%d9%87-%d8%a7%d8%b2-tailwind-%d8%a8%d9%87-%d8%b9%d9%86%d9%88%d8%a7%d9%86-%db%8c%da%a9-%da%86%d8%a7%d8%b1%da%86%d9%88\/#%D9%85%D8%AD%D8%AA%D9%88%D8%A7%DB%8C_%D8%A7%D9%88%D9%84%DB%8C%D9%86_%D9%81%D8%A7%DB%8C%D9%84_%D8%B3%D9%81%D8%A7%D8%B1%D8%B4%DB%8C_Tailwind_%D8%B1%D8%A7_%D8%AF%D8%B1_%D8%A2%D9%86_%D9%82%D8%B1%D8%A7%D8%B1_%D8%AF%D9%87%DB%8C%D8%AF_custom1css\" >\u0645\u062d\u062a\u0648\u0627\u06cc \u0627\u0648\u0644\u06cc\u0646 \u0641\u0627\u06cc\u0644 \u0633\u0641\u0627\u0631\u0634\u06cc Tailwind \u0631\u0627 \u062f\u0631 \u0622\u0646 \u0642\u0631\u0627\u0631 \u062f\u0647\u06cc\u062f custom1.css<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/nabfollower.com\/blog\/ruby-on-rails-8-fast-frontend-%d8%a8%d8%a7-%d8%a7%d8%b3%d8%aa%d9%81%d8%a7%d8%af%d9%87-%d8%a7%d8%b2-tailwind-%d8%a8%d9%87-%d8%b9%d9%86%d9%88%d8%a7%d9%86-%db%8c%da%a9-%da%86%d8%a7%d8%b1%da%86%d9%88\/#%D9%85%D8%AD%D8%AA%D9%88%DB%8C%D8%A7%D8%AA_%D8%AF%D9%88%D9%85%DB%8C%D9%86_%D9%81%D8%A7%DB%8C%D9%84_%D8%B3%D9%81%D8%A7%D8%B1%D8%B4%DB%8C_Tailwind_%D8%B1%D8%A7_%D8%AF%D8%B1_%D8%A2%D9%86_%D9%82%D8%B1%D8%A7%D8%B1_%D8%AF%D9%87%DB%8C%D8%AF_custom2css\" >\u0645\u062d\u062a\u0648\u06cc\u0627\u062a \u062f\u0648\u0645\u06cc\u0646 \u0641\u0627\u06cc\u0644 \u0633\u0641\u0627\u0631\u0634\u06cc Tailwind \u0631\u0627 \u062f\u0631 \u0622\u0646 \u0642\u0631\u0627\u0631 \u062f\u0647\u06cc\u062f custom2.css<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/nabfollower.com\/blog\/ruby-on-rails-8-fast-frontend-%d8%a8%d8%a7-%d8%a7%d8%b3%d8%aa%d9%81%d8%a7%d8%af%d9%87-%d8%a7%d8%b2-tailwind-%d8%a8%d9%87-%d8%b9%d9%86%d9%88%d8%a7%d9%86-%db%8c%da%a9-%da%86%d8%a7%d8%b1%da%86%d9%88\/#%D9%85%D8%AD%D8%AA%D9%88%DB%8C%D8%A7%D8%AA_%D8%B3%D9%88%D9%85%DB%8C%D9%86_%D9%81%D8%A7%DB%8C%D9%84_%D8%B3%D9%81%D8%A7%D8%B1%D8%B4%DB%8C_Tailwind_%D8%B1%D8%A7_%D8%AF%D8%B1_%D8%A2%D9%86_%D9%82%D8%B1%D8%A7%D8%B1_%D8%AF%D9%87%DB%8C%D8%AF_custom3css\" >\u0645\u062d\u062a\u0648\u06cc\u0627\u062a \u0633\u0648\u0645\u06cc\u0646 \u0641\u0627\u06cc\u0644 \u0633\u0641\u0627\u0631\u0634\u06cc Tailwind \u0631\u0627 \u062f\u0631 \u0622\u0646 \u0642\u0631\u0627\u0631 \u062f\u0647\u06cc\u062f custom3.css<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/nabfollower.com\/blog\/ruby-on-rails-8-fast-frontend-%d8%a8%d8%a7-%d8%a7%d8%b3%d8%aa%d9%81%d8%a7%d8%af%d9%87-%d8%a7%d8%b2-tailwind-%d8%a8%d9%87-%d8%b9%d9%86%d9%88%d8%a7%d9%86-%db%8c%da%a9-%da%86%d8%a7%d8%b1%da%86%d9%88\/#%22\" >\"<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/nabfollower.com\/blog\/ruby-on-rails-8-fast-frontend-%d8%a8%d8%a7-%d8%a7%d8%b3%d8%aa%d9%81%d8%a7%d8%af%d9%87-%d8%a7%d8%b2-tailwind-%d8%a8%d9%87-%d8%b9%d9%86%d9%88%d8%a7%d9%86-%db%8c%da%a9-%da%86%d8%a7%d8%b1%da%86%d9%88\/#%22-2\" >\"<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/nabfollower.com\/blog\/ruby-on-rails-8-fast-frontend-%d8%a8%d8%a7-%d8%a7%d8%b3%d8%aa%d9%81%d8%a7%d8%af%d9%87-%d8%a7%d8%b2-tailwind-%d8%a8%d9%87-%d8%b9%d9%86%d9%88%d8%a7%d9%86-%db%8c%da%a9-%da%86%d8%a7%d8%b1%da%86%d9%88\/#%DA%A9%D9%84%D8%A7%D8%B3_%D9%87%D8%A7%DB%8C_Tailwind_%D8%B1%D8%A7_%D8%A7%D8%B2_%D9%81%D8%A7%DB%8C%D9%84_%D8%AD%D8%B0%D9%81_%DA%A9%D9%86%DB%8C%D8%AF_appviewslayoutsapplicationhtmlerb\" >\u06a9\u0644\u0627\u0633 \u0647\u0627\u06cc Tailwind \u0631\u0627 \u0627\u0632 \u0641\u0627\u06cc\u0644 \u062d\u0630\u0641 \u06a9\u0646\u06cc\u062f app\/views\/layouts\/application.html.erb<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-11\" href=\"https:\/\/nabfollower.com\/blog\/ruby-on-rails-8-fast-frontend-%d8%a8%d8%a7-%d8%a7%d8%b3%d8%aa%d9%81%d8%a7%d8%af%d9%87-%d8%a7%d8%b2-tailwind-%d8%a8%d9%87-%d8%b9%d9%86%d9%88%d8%a7%d9%86-%db%8c%da%a9-%da%86%d8%a7%d8%b1%da%86%d9%88\/#%D8%A8%D8%B1%D8%AE%DB%8C_%D8%A7%D8%B2_%D9%85%D8%B1%D8%A7%D8%AD%D9%84_%D8%A7%D8%B6%D8%A7%D9%81%DB%8C_%D8%A8%D8%B1%D8%A7%DB%8C_%DA%A9%D8%A7%D8%B1%D8%A2%D9%85%D8%AF_%DA%A9%D8%B1%D8%AF%D9%86_%DB%8C%DA%A9_%D8%B8%D8%A7%D9%87%D8%B1_%D8%B7%D8%B1%D8%A7%D8%AD%DB%8C_%D8%B4%D8%AF%D9%87_%D8%A8%D9%87_%D9%81%D8%A7%DB%8C%D9%84%E2%80%8C%D9%87%D8%A7%DB%8C_Tailwind_%D8%B3%D9%81%D8%A7%D8%B1%D8%B4%DB%8C\" >\u0628\u0631\u062e\u06cc \u0627\u0632 \u0645\u0631\u0627\u062d\u0644 \u0627\u0636\u0627\u0641\u06cc \u0628\u0631\u0627\u06cc \u06a9\u0627\u0631\u0622\u0645\u062f \u06a9\u0631\u062f\u0646 \u06cc\u06a9 \u0638\u0627\u0647\u0631 \u0637\u0631\u0627\u062d\u06cc \u0634\u062f\u0647 \u0628\u0647 \u0641\u0627\u06cc\u0644\u200c\u0647\u0627\u06cc Tailwind \u0633\u0641\u0627\u0631\u0634\u06cc.<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-12\" href=\"https:\/\/nabfollower.com\/blog\/ruby-on-rails-8-fast-frontend-%d8%a8%d8%a7-%d8%a7%d8%b3%d8%aa%d9%81%d8%a7%d8%af%d9%87-%d8%a7%d8%b2-tailwind-%d8%a8%d9%87-%d8%b9%d9%86%d9%88%d8%a7%d9%86-%db%8c%da%a9-%da%86%d8%a7%d8%b1%da%86%d9%88\/#%D8%A7%DA%A9%D9%86%D9%88%D9%86%D8%8C_%D9%85%D9%82%D8%AF%D8%A7%D8%B1%DB%8C_%D8%A7%D8%B3%D8%AA%D8%A7%DB%8C%D9%84_HTML_%D8%A8%D8%A7_%D8%A7%D8%B3%D8%AA%D9%81%D8%A7%D8%AF%D9%87_%D8%A7%D8%B2_Tailwind_%D8%A8%D9%87_%D8%B9%D9%86%D9%88%D8%A7%D9%86_%DB%8C%DA%A9_%DA%86%D8%A7%D8%B1%DA%86%D9%88%D8%A8_%D8%A8%D8%AF%D9%88%D9%86_%DA%A9%D9%84%D8%A7%D8%B3_%F0%9F%A4%A9\" >\u0627\u06a9\u0646\u0648\u0646\u060c \u0645\u0642\u062f\u0627\u0631\u06cc \u0627\u0633\u062a\u0627\u06cc\u0644 HTML \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 Tailwind \u0628\u0647 \u0639\u0646\u0648\u0627\u0646 \u06cc\u06a9 \u0686\u0627\u0631\u0686\u0648\u0628 \u0628\u062f\u0648\u0646 \u06a9\u0644\u0627\u0633 \ud83e\udd29<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-13\" href=\"https:\/\/nabfollower.com\/blog\/ruby-on-rails-8-fast-frontend-%d8%a8%d8%a7-%d8%a7%d8%b3%d8%aa%d9%81%d8%a7%d8%af%d9%87-%d8%a7%d8%b2-tailwind-%d8%a8%d9%87-%d8%b9%d9%86%d9%88%d8%a7%d9%86-%db%8c%da%a9-%da%86%d8%a7%d8%b1%da%86%d9%88\/#%D8%AD%D8%A7%D9%84%D8%AA_%D8%AA%D8%A7%D8%B1%DB%8C%DA%A9\" >\u062d\u0627\u0644\u062a \u062a\u0627\u0631\u06cc\u06a9<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-14\" href=\"https:\/\/nabfollower.com\/blog\/ruby-on-rails-8-fast-frontend-%d8%a8%d8%a7-%d8%a7%d8%b3%d8%aa%d9%81%d8%a7%d8%af%d9%87-%d8%a7%d8%b2-tailwind-%d8%a8%d9%87-%d8%b9%d9%86%d9%88%d8%a7%d9%86-%db%8c%da%a9-%da%86%d8%a7%d8%b1%da%86%d9%88\/#%D9%85%D8%B1%D8%A7%D8%AD%D9%84_%D8%A8%D8%B9%D8%AF%DB%8C\" >\u0645\u0631\u0627\u062d\u0644 \u0628\u0639\u062f\u06cc<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-15\" href=\"https:\/\/nabfollower.com\/blog\/ruby-on-rails-8-fast-frontend-%d8%a8%d8%a7-%d8%a7%d8%b3%d8%aa%d9%81%d8%a7%d8%af%d9%87-%d8%a7%d8%b2-tailwind-%d8%a8%d9%87-%d8%b9%d9%86%d9%88%d8%a7%d9%86-%db%8c%da%a9-%da%86%d8%a7%d8%b1%da%86%d9%88\/#%D9%85%D8%B1%D8%A7%D8%AC%D8%B9\" >\u0645\u0631\u0627\u062c\u0639<\/a><\/li><\/ul><\/nav><\/div>\n<h3><span class=\"ez-toc-section\" id=\"%DB%8C%DA%A9_%D8%A8%D8%B1%D9%86%D8%A7%D9%85%D9%87_%D8%AC%D8%AF%DB%8C%D8%AF_Rails_%D8%B1%D8%A7_%D8%B4%D8%B1%D9%88%D8%B9_%DA%A9%D9%86%DB%8C%D8%AF\"><\/span>\n<p>  \u06cc\u06a9 \u0628\u0631\u0646\u0627\u0645\u0647 \u062c\u062f\u06cc\u062f Rails \u0631\u0627 \u0634\u0631\u0648\u0639 \u06a9\u0646\u06cc\u062f<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<ul>\n<li>O <code>time<\/code> \u0642\u0628\u0644 \u0627\u0632 \u0641\u0631\u0645\u0627\u0646 <code>rails<\/code> \u0628\u0631\u0627\u06cc \u0646\u0645\u0627\u06cc\u0634 \u0632\u0645\u0627\u0646 \u0627\u062c\u0631\u0627\u06cc \u0622\u0646 \u062f\u0631 \u067e\u0627\u06cc\u0627\u0646 \u0627\u062c\u0631\u0627\u06cc \u062f\u0633\u062a\u0648\u0631 \u0639\u0645\u0644 \u0645\u06cc \u06a9\u0646\u062f. \u062f\u0631 \u0645\u062b\u0627\u0644 \u0632\u06cc\u0631 47 \u062b\u0627\u0646\u06cc\u0647 \u0637\u0648\u0644 \u06a9\u0634\u06cc\u062f.\n<\/li>\n<\/ul>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight shell\"><code><span class=\"nv\">$ <\/span>rails <span class=\"nt\">-v<\/span>\nRails 8.0.0\n\n<span class=\"nv\">$ <\/span><span class=\"nb\">time <\/span>rails new classless-css-tailwind\n...\nreal    0m47.500s\nuser    0m33.052s\nsys     0m4.249s\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>Rails 8\u060c \u062f\u0631 \u0641\u0644\u0633\u0641\u0647 No Build \u062e\u0648\u062f\u060c \u0627\u0632 Propshaft \u0628\u0647 \u0639\u0646\u0648\u0627\u0646 \u06cc\u06a9 \u06a9\u062a\u0627\u0628\u062e\u0627\u0646\u0647 \u062e\u0637 \u0644\u0648\u0644\u0647 \u062f\u0627\u0631\u0627\u06cc\u06cc \u0648 Importmap \u0628\u0647 \u0639\u0646\u0648\u0627\u0646 \u06a9\u062a\u0627\u0628\u062e\u0627\u0646\u0647 \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u0628\u0647 \u0637\u0648\u0631 \u067e\u06cc\u0634 \u0641\u0631\u0636 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u06a9\u0646\u062f. Importmap \u0647\u06cc\u0686 \u06af\u0648\u0646\u0647 \u067e\u0631\u062f\u0627\u0632\u0634 \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u0631\u0627 \u0627\u0646\u062c\u0627\u0645 \u0646\u0645\u06cc \u062f\u0647\u062f.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"%D9%BE%D8%B1%D9%88%DA%98%D9%87_%D8%B1%D8%A7_%D8%A8%D8%A7_VSCode_%DB%8C%D8%A7_%D9%88%DB%8C%D8%B1%D8%A7%DB%8C%D8%B4%DA%AF%D8%B1_%D8%AF%D9%84%D8%AE%D9%88%D8%A7%D9%87_%D8%AE%D9%88%D8%AF_%D8%A8%D8%A7%D8%B2_%DA%A9%D9%86%DB%8C%D8%AF\"><\/span>\n<p>  \u067e\u0631\u0648\u0698\u0647 \u0631\u0627 \u0628\u0627 VSCode \u06cc\u0627 \u0648\u06cc\u0631\u0627\u06cc\u0634\u06af\u0631 \u062f\u0644\u062e\u0648\u0627\u0647 \u062e\u0648\u062f \u0628\u0627\u0632 \u06a9\u0646\u06cc\u062f<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight shell\"><code><span class=\"nv\">$ <\/span><span class=\"nb\">cd <\/span>classless-css-tailwind <span class=\"o\">&amp;&amp;<\/span> code <span class=\"nb\">.<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<h3><span class=\"ez-toc-section\" id=\"%D8%A7%DB%8C%D8%AC%D8%A7%D8%AF_%DA%86%D9%86%D8%AF_%D8%B5%D9%81%D8%AD%D9%87_%D8%A8%D8%B1%D8%A7%DB%8C_%D8%AA%D8%AC%D8%B3%D9%85_%D8%A7%D8%B3%D8%AA%D8%A7%DB%8C%D9%84_%D8%B9%D9%86%D8%A7%D8%B5%D8%B1_HTML\"><\/span>\n<p>  \u0627\u06cc\u062c\u0627\u062f \u0686\u0646\u062f \u0635\u0641\u062d\u0647 \u0628\u0631\u0627\u06cc \u062a\u062c\u0633\u0645 \u0627\u0633\u062a\u0627\u06cc\u0644 \u0639\u0646\u0627\u0635\u0631 HTML<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\u0635\u0641\u062d\u0627\u062a \u062f\u0631 \u0627\u0648\u0644\u06cc\u0646 \u0645\u0642\u0627\u0644\u0647 \u0627\u06cc\u0646 \u0645\u062c\u0645\u0648\u0639\u0647 \u062f\u0631 \u0645\u0631\u0627\u062d\u0644 \u0645\u0634\u062a\u0631\u06a9 \u0647\u0633\u062a\u0646\u062f.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"%D9%81%D8%A7%DB%8C%D9%84_Tailwind_%D8%B1%D8%A7_%D8%AA%D8%BA%DB%8C%DB%8C%D8%B1_%D8%AF%D9%87%DB%8C%D8%AF_appassetsstylesheetsapplicationtailwindcss\"><\/span>\n<p>  \u0641\u0627\u06cc\u0644 Tailwind \u0631\u0627 \u062a\u063a\u06cc\u06cc\u0631 \u062f\u0647\u06cc\u062f <code>app\/assets\/stylesheets\/application.tailwind.css<\/code><br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<details>\n<summary>\u0646\u0645\u0627\u06cc\u0634 \u0628\u06cc\u0634\u062a\u0631\u2026<\/summary>\n<p>\u0641\u0627\u06cc\u0644 \u0628\u0627\u0644\u0627 \u0631\u0627 \u062a\u063a\u06cc\u06cc\u0631 \u062f\u0647\u06cc\u062f \u062a\u0627 \u0627\u0631\u062c\u0627\u0639 \u0628\u0647 \u0641\u0627\u06cc\u0644\u200c\u0647\u0627\u06cc \u0628\u0627 \u0627\u0633\u062a\u0627\u06cc\u0644 Tailwind CSS \u0631\u0627 \u062f\u0631 \u062e\u0648\u062f \u062f\u0627\u0634\u062a\u0647 \u0628\u0627\u0634\u062f. \u062a\u0648\u062c\u0647 \u062f\u0627\u0634\u062a\u0647 \u0628\u0627\u0634\u06cc\u062f \u06a9\u0647 \u0641\u0642\u0637 <code>Op\u00e7\u00e3o 1<\/code> \u0628\u062f\u0648\u0646 \u0627\u0638\u0647\u0627\u0631 \u0646\u0638\u0631 \u0627\u0633\u062a.<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight css\"><code><span class=\"c\">\/* INSIRA OS CSS CUSTOMIZADOS DO TAILWIND NA PARTE SUPERIOR *\/<\/span>\n<span class=\"c\">\/* SE O \"@tailwind base\", \"@tailwind components\" E \"@tailwind utilities\" N\u00c3O ESTIVEREM COMENTADOS *\/<\/span>\n\n<span class=\"c\">\/* Op\u00e7\u00e3o 1: Verde *\/<\/span>\n<span class=\"k\">@import<\/span> <span class=\"s1\">\".\/custom_tailwind\/custom1.css\"<\/span><span class=\"p\">;<\/span>\n\n<span class=\"c\">\/* Op\u00e7\u00e3o 2: Azul *\/<\/span>\n<span class=\"c\">\/* @import \".\/custom_tailwind\/custom2.css\"; *\/<\/span>\n\n<span class=\"c\">\/* Op\u00e7\u00e3o3: Do artigo \"Classless CSS based on Tailwind\" *\/<\/span>\n<span class=\"c\">\/* https:\/\/medium.com\/@AntonShevchuk\/classless-css-based-on-tailwind-57d4ef745c1f *\/<\/span>\n<span class=\"c\">\/* @import \".\/custom_tailwind\/custom3.css\"; *\/<\/span>\n\n<span class=\"c\">\/* @tailwind base;\n@tailwind components;\n@tailwind utilities; *\/<\/span>\n\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u06cc\u06a9 \u062e\u0645\u06cc\u0631 \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f <code>custom_tailwind<\/code> \u062f\u0627\u062e\u0644 \u062f\u0627\u06cc\u0631\u06a9\u062a\u0648\u0631\u06cc <code>app\/assets\/stylesheets\/<\/code> \u0628\u0631\u0627\u06cc \u0627\u0641\u0632\u0648\u062f\u0646 \u0641\u0627\u06cc\u0644 \u0647\u0627\u06cc \u0633\u0641\u0627\u0631\u0634\u06cc Tailwind.<\/p>\n<\/details>\n<h3><span class=\"ez-toc-section\" id=\"%D9%85%D8%AD%D8%AA%D9%88%D8%A7%DB%8C_%D8%A7%D9%88%D9%84%DB%8C%D9%86_%D9%81%D8%A7%DB%8C%D9%84_%D8%B3%D9%81%D8%A7%D8%B1%D8%B4%DB%8C_Tailwind_%D8%B1%D8%A7_%D8%AF%D8%B1_%D8%A2%D9%86_%D9%82%D8%B1%D8%A7%D8%B1_%D8%AF%D9%87%DB%8C%D8%AF_custom1css\"><\/span>\n<p>  \u0645\u062d\u062a\u0648\u0627\u06cc \u0627\u0648\u0644\u06cc\u0646 \u0641\u0627\u06cc\u0644 \u0633\u0641\u0627\u0631\u0634\u06cc Tailwind \u0631\u0627 \u062f\u0631 \u0622\u0646 \u0642\u0631\u0627\u0631 \u062f\u0647\u06cc\u062f <code>custom1.css<\/code><br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<details>\n<summary>\u0646\u0645\u0627\u06cc\u0634 \u0628\u06cc\u0634\u062a\u0631\u2026<\/summary>\n<p>\u0641\u0627\u06cc\u0644 \u0631\u0627 \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f <code>app\/assets\/stylesheets\/custom_tailwind\/custom1.css<\/code> \u0648 \u0645\u0637\u0627\u0644\u0628 \u0632\u06cc\u0631 \u0631\u0627 \u06a9\u067e\u06cc \u06a9\u0646\u06cc\u062f<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight css\"><code><span class=\"c\">\/* \n  Vis\u00e3o geral:\n    Unifica\u00e7\u00e3o de vari\u00e1veis de tema (ao inv\u00e9s de --background-light e --background-dark, temos apenas --background, e assim por diante).\n    Redu\u00e7\u00e3o de duplica\u00e7\u00f5es de @media (prefers-color-scheme: dark). Boa parte do tema escuro est\u00e1 centralizado no :root.\n    Usamos vari\u00e1veis no lugar das cores diretas e, em alguns pontos, aproveitar a nomenclatura do Tailwind.\n\n    Caso utilize o modo escuro via classes (class=\"dark\") em vez de prefers-color-scheme, \n    a l\u00f3gica seria um pouco diferente (usando dark:bg-*, dark:text-*, etc.). \n    Mas, conforme as recomenda\u00e7\u00f5es, mantivemos o @media (prefers-color-scheme: dark) para respeitar as prefer\u00eancias do usu\u00e1rio.\n\n\n  1. Vari\u00e1veis de tema unificadas\n  Agora temos --background, --text e --accent (entre outras) em vez de --background-light, --background-dark, etc.\n  Isso reduz a repeti\u00e7\u00e3o e deixa o c\u00f3digo mais f\u00e1cil de manter.\n\n  2. Menos repeti\u00e7\u00f5es de @media (prefers-color-scheme: dark)\n  Quase tudo para o tema escuro foi concentrado em um \u00fanico bloco, dentro do :root.\n  Assim, sempre que o usu\u00e1rio preferir o modo escuro, todas as vari\u00e1veis s\u00e3o redefinidas.\n\n  3. Uso de vari\u00e1veis complementares\n  Adicionamos --background-code, --border, --form-border e --focus-ring para garantir que todas as cores que possam variar \n  conforme o tema sejam facilmente alteradas.\n\n  4. Estilos de formul\u00e1rio otimizados\n  Em vez de separar cada tipo de input em v\u00e1rios blocos, unificamos a maioria deles.\n  Evita duplica\u00e7\u00f5es e mant\u00e9m uma consist\u00eancia de design.\n\n  ---\n  Observa\u00e7\u00f5es Finais\n\n  Se quiser seguir ainda mais o padr\u00e3o do Tailwind sem tantas vari\u00e1veis, voc\u00ea poderia usar as classes utilit\u00e1rias padr\u00e3o \n  (bg-gray-50, text-gray-900, dark:bg-gray-800, dark:text-gray-100, etc.).\n  Para quem prefere o modo escuro via classe .dark, bastaria trocar o @media (prefers-color-scheme: dark) \n  por seletores .dark &amp; { ... } no arquivo e controlar o tema em JavaScript ou manualmente no HTML ().\n\n*\/<\/span>\n\n<span class=\"c\">\/* \n |-----------------------------------------------------------------------------\n | IMPORTA O TAILWIND CSS\n |-----------------------------------------------------------------------------\n | Aqui importamos as diretivas do Tailwind para carregar o CSS base, \n | componentes e utilit\u00e1rios. Isso garante que todas as funcionalidades \n | essenciais do Tailwind sejam carregadas antes de adicionarmos \n | nossas customiza\u00e7\u00f5es.\n *\/<\/span>\n<span class=\"k\">@tailwind<\/span> <span class=\"n\">base<\/span><span class=\"p\">;<\/span>\n<span class=\"k\">@tailwind<\/span> <span class=\"n\">components<\/span><span class=\"p\">;<\/span>\n<span class=\"k\">@tailwind<\/span> <span class=\"n\">utilities<\/span><span class=\"p\">;<\/span>\n\n<span class=\"c\">\/* \n |-----------------------------------------------------------------------------\n | VARI\u00c1VEIS CSS PARA TEMAS CLARO\/ESCURO\n |-----------------------------------------------------------------------------\n | Agora, unificamos as vari\u00e1veis para evitar duplica\u00e7\u00e3o. Em vez de termos\n | --background-light e --background-dark, temos apenas --background e \n | mudamos seu valor no @media (prefers-color-scheme: dark).\n *\/<\/span>\n<span class=\"nd\">:root<\/span> <span class=\"p\">{<\/span>\n  <span class=\"c\">\/* Tema claro (default) *\/<\/span>\n  <span class=\"py\">--background<\/span><span class=\"p\">:<\/span> <span class=\"m\">#ffffff<\/span><span class=\"p\">;<\/span> <span class=\"c\">\/* Fundo do site *\/<\/span>\n  <span class=\"py\">--text<\/span><span class=\"p\">:<\/span> <span class=\"m\">#292929<\/span><span class=\"p\">;<\/span> <span class=\"c\">\/* Cor principal do texto *\/<\/span>\n  <span class=\"py\">--accent<\/span><span class=\"p\">:<\/span> <span class=\"m\">#1a8917<\/span><span class=\"p\">;<\/span> <span class=\"c\">\/* Cor de destaque (links, bot\u00f5es, etc.) *\/<\/span>\n\n  <span class=\"c\">\/* Vari\u00e1veis complementares para uso em elementos espec\u00edficos *\/<\/span>\n  <span class=\"py\">--background-code<\/span><span class=\"p\">:<\/span> <span class=\"m\">#f3f4f6<\/span><span class=\"p\">;<\/span> <span class=\"c\">\/* Fundo de blocos de c\u00f3digo no claro *\/<\/span>\n  <span class=\"py\">--border<\/span><span class=\"p\">:<\/span> <span class=\"m\">#e5e7eb<\/span><span class=\"p\">;<\/span> <span class=\"c\">\/* Cor de borda padr\u00e3o (claro) *\/<\/span>\n  <span class=\"py\">--form-border<\/span><span class=\"p\">:<\/span> <span class=\"m\">#d1d5db<\/span><span class=\"p\">;<\/span> <span class=\"c\">\/* Cor de borda padr\u00e3o para formul\u00e1rios (claro) *\/<\/span>\n  <span class=\"py\">--focus-ring<\/span><span class=\"p\">:<\/span> <span class=\"m\">#1a8917<\/span><span class=\"p\">;<\/span> <span class=\"c\">\/* Cor do anel de foco (claro) *\/<\/span>\n<span class=\"p\">}<\/span>\n\n<span class=\"k\">@media<\/span> <span class=\"p\">(<\/span><span class=\"n\">prefers-color-scheme<\/span><span class=\"p\">:<\/span> <span class=\"n\">dark<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n  <span class=\"nd\">:root<\/span> <span class=\"p\">{<\/span>\n    <span class=\"c\">\/* Tema escuro *\/<\/span>\n    <span class=\"py\">--background<\/span><span class=\"p\">:<\/span> <span class=\"m\">#121212<\/span><span class=\"p\">;<\/span> <span class=\"c\">\/* Fundo do site *\/<\/span>\n    <span class=\"py\">--text<\/span><span class=\"p\">:<\/span> <span class=\"m\">#e6e6e6<\/span><span class=\"p\">;<\/span> <span class=\"c\">\/* Cor principal do texto *\/<\/span>\n    <span class=\"py\">--accent<\/span><span class=\"p\">:<\/span> <span class=\"m\">#4caf50<\/span><span class=\"p\">;<\/span> <span class=\"c\">\/* Cor de destaque (links, bot\u00f5es, etc.) *\/<\/span>\n\n    <span class=\"c\">\/* Vari\u00e1veis complementares *\/<\/span>\n    <span class=\"py\">--background-code<\/span><span class=\"p\">:<\/span> <span class=\"m\">#1f2937<\/span><span class=\"p\">;<\/span> <span class=\"c\">\/* Fundo de blocos de c\u00f3digo no escuro *\/<\/span>\n    <span class=\"py\">--border<\/span><span class=\"p\">:<\/span> <span class=\"m\">#374151<\/span><span class=\"p\">;<\/span> <span class=\"c\">\/* Cor de borda padr\u00e3o (escuro) *\/<\/span>\n    <span class=\"py\">--form-border<\/span><span class=\"p\">:<\/span> <span class=\"m\">#4b5563<\/span><span class=\"p\">;<\/span> <span class=\"c\">\/* Cor de borda padr\u00e3o para formul\u00e1rios (escuro) *\/<\/span>\n    <span class=\"py\">--focus-ring<\/span><span class=\"p\">:<\/span> <span class=\"m\">#4caf50<\/span><span class=\"p\">;<\/span> <span class=\"c\">\/* Cor do anel de foco (escuro) *\/<\/span>\n  <span class=\"p\">}<\/span>\n<span class=\"p\">}<\/span>\n\n<span class=\"c\">\/* \n |-----------------------------------------------------------------------------\n | ESTILOS BASE\n |-----------------------------------------------------------------------------\n | A camada base (layer base) permite que possamos sobrescrever\n | estilos padr\u00e3o do browser e aplicar resets ou est\u00e9ticas iniciais.\n | Aqui fazemos o 'apply' de classes Tailwind diretamente em tags HTML \n | para criar estilos globais.\n *\/<\/span>\n<span class=\"k\">@layer<\/span> <span class=\"n\">base<\/span> <span class=\"p\">{<\/span>\n  <span class=\"c\">\/*\n   |-----------------------------------------------------------------------------\n   | HTML\n   |-----------------------------------------------------------------------------\n   | O  recebe o antialiased (que melhora a renderiza\u00e7\u00e3o de fontes),\n   | al\u00e9m das cores de fundo e texto baseadas em nossas vari\u00e1veis.\n   *\/<\/span>\n  <span class=\"nt\">html<\/span> <span class=\"p\">{<\/span>\n    <span class=\"err\">@apply<\/span> <span class=\"err\">antialiased;<\/span>\n    <span class=\"nl\">background-color<\/span><span class=\"p\">:<\/span> <span class=\"n\">var<\/span><span class=\"p\">(<\/span><span class=\"n\">--background<\/span><span class=\"p\">);<\/span>\n    <span class=\"nl\">color<\/span><span class=\"p\">:<\/span> <span class=\"n\">var<\/span><span class=\"p\">(<\/span><span class=\"n\">--text<\/span><span class=\"p\">);<\/span>\n  <span class=\"p\">}<\/span>\n\n  <span class=\"c\">\/*\n   |-----------------------------------------------------------------------------\n   | BODY\n   |-----------------------------------------------------------------------------\n   | Aqui definimos o espa\u00e7amento interno (padding) para o corpo do site\n   | e uma largura m\u00e1xima de 4xl, centralizando (mx-auto) para que o \n   | conte\u00fado n\u00e3o fique muito extenso em telas grandes.\n   *\/<\/span>\n  <span class=\"nt\">body<\/span> <span class=\"p\">{<\/span>\n    <span class=\"err\">@apply<\/span> <span class=\"err\">mx-auto<\/span> <span class=\"err\">max-w-4xl<\/span> <span class=\"err\">px-4<\/span> <span class=\"err\">leading-relaxed<\/span> <span class=\"py\">sm<\/span><span class=\"p\">:<\/span><span class=\"n\">px-6<\/span> <span class=\"n\">lg<\/span><span class=\"p\">:<\/span><span class=\"n\">px-8<\/span><span class=\"p\">;<\/span>\n  <span class=\"p\">}<\/span>\n\n  <span class=\"c\">\/*\n   |-----------------------------------------------------------------------------\n   | T\u00cdTULOS (H1, H2, H3, etc.)\n   |-----------------------------------------------------------------------------\n   | Definimos tamanhos de fonte diferentes para cada n\u00edvel de t\u00edtulo,\n   | al\u00e9m de margens inferiores para separar visualmente do texto seguinte.\n   | Tamb\u00e9m usamos breakpoints (sm:) para modificar o tamanho em telas maiores.\n   *\/<\/span>\n  <span class=\"c\">\/* h1 {\n    @apply mb-8 text-4xl font-bold leading-tight sm:text-5xl;\n  }\n  h2 {\n    @apply mb-6 text-3xl font-bold leading-tight sm:text-4xl;\n  }\n  h3 {\n    @apply mb-4 text-2xl font-bold sm:text-3xl;\n  }\n  h4 {\n    @apply mb-4 text-xl font-bold;\n  }\n  h5 {\n    @apply mb-4 text-lg font-bold;\n  }\n  h6 {\n    @apply mb-4 text-base font-bold;\n  } *\/<\/span>\n\n  <span class=\"c\">\/* Principais mudan\u00e7as feitas:\n\n  1. Removemos os breakpoints `sm:` fixos e substitu\u00edmos por `clamp()`\n  2. A fun\u00e7\u00e3o `clamp()` aceita tr\u00eas valores:\n    - Valor m\u00ednimo (para telas pequenas)\n    - Valor preferido (calculado usando viewport width)\n    - Valor m\u00e1ximo (para telas grandes)\n\n  3. A f\u00f3rmula geral usada \u00e9:\n    - Para t\u00edtulos: percentual do viewport (vw) + valor base em rem\n    - Para texto regular: valor menor do viewport + valor base menor\n\n  4. Os valores foram escolhidos para criar uma transi\u00e7\u00e3o suave entre:\n    - Telas m\u00f3veis (320px+)\n    - Tablets (768px+)\n    - Desktops (1024px+)\n    - Telas grandes (1440px+)\n\n  Esta implementa\u00e7\u00e3o oferece v\u00e1rias vantagens:\n  - Transi\u00e7\u00e3o mais suave entre tamanhos de tela\n  - Elimina \"saltos\" abruptos nos breakpoints\n  - Mant\u00e9m a legibilidade em todos os tamanhos de tela\n  - Reduz a quantidade de c\u00f3digo necess\u00e1rio\n  - Proporciona uma experi\u00eancia mais fluida aos usu\u00e1rios *\/<\/span>\n\n  <span class=\"nt\">h1<\/span> <span class=\"p\">{<\/span>\n    <span class=\"err\">@apply<\/span> <span class=\"err\">mb-8<\/span> <span class=\"err\">font-bold<\/span> <span class=\"err\">leading-tight;<\/span>\n    <span class=\"nl\">font-size<\/span><span class=\"p\">:<\/span> <span class=\"n\">clamp<\/span><span class=\"p\">(<\/span><span class=\"m\">2.25rem<\/span><span class=\"p\">,<\/span> <span class=\"m\">5vw<\/span> <span class=\"err\">+<\/span> <span class=\"m\">1rem<\/span><span class=\"p\">,<\/span> <span class=\"m\">3.5rem<\/span><span class=\"p\">);<\/span>\n  <span class=\"p\">}<\/span>\n\n  <span class=\"nt\">h2<\/span> <span class=\"p\">{<\/span>\n    <span class=\"err\">@apply<\/span> <span class=\"err\">mb-6<\/span> <span class=\"err\">font-bold<\/span> <span class=\"err\">leading-tight;<\/span>\n    <span class=\"nl\">font-size<\/span><span class=\"p\">:<\/span> <span class=\"n\">clamp<\/span><span class=\"p\">(<\/span><span class=\"m\">1.875rem<\/span><span class=\"p\">,<\/span> <span class=\"m\">4vw<\/span> <span class=\"err\">+<\/span> <span class=\"m\">0.5rem<\/span><span class=\"p\">,<\/span> <span class=\"m\">2.75rem<\/span><span class=\"p\">);<\/span>\n  <span class=\"p\">}<\/span>\n\n  <span class=\"nt\">h3<\/span> <span class=\"p\">{<\/span>\n    <span class=\"err\">@apply<\/span> <span class=\"err\">mb-4<\/span> <span class=\"err\">font-bold;<\/span>\n    <span class=\"nl\">font-size<\/span><span class=\"p\">:<\/span> <span class=\"n\">clamp<\/span><span class=\"p\">(<\/span><span class=\"m\">1.5rem<\/span><span class=\"p\">,<\/span> <span class=\"m\">3vw<\/span> <span class=\"err\">+<\/span> <span class=\"m\">0.5rem<\/span><span class=\"p\">,<\/span> <span class=\"m\">2.25rem<\/span><span class=\"p\">);<\/span>\n  <span class=\"p\">}<\/span>\n\n  <span class=\"nt\">h4<\/span> <span class=\"p\">{<\/span>\n    <span class=\"err\">@apply<\/span> <span class=\"err\">mb-4<\/span> <span class=\"err\">font-bold;<\/span>\n    <span class=\"nl\">font-size<\/span><span class=\"p\">:<\/span> <span class=\"n\">clamp<\/span><span class=\"p\">(<\/span><span class=\"m\">1.25rem<\/span><span class=\"p\">,<\/span> <span class=\"m\">2vw<\/span> <span class=\"err\">+<\/span> <span class=\"m\">0.5rem<\/span><span class=\"p\">,<\/span> <span class=\"m\">1.75rem<\/span><span class=\"p\">);<\/span>\n  <span class=\"p\">}<\/span>\n\n  <span class=\"nt\">h5<\/span> <span class=\"p\">{<\/span>\n    <span class=\"err\">@apply<\/span> <span class=\"err\">mb-4<\/span> <span class=\"err\">font-bold;<\/span>\n    <span class=\"nl\">font-size<\/span><span class=\"p\">:<\/span> <span class=\"n\">clamp<\/span><span class=\"p\">(<\/span><span class=\"m\">1.125rem<\/span><span class=\"p\">,<\/span> <span class=\"m\">1.5vw<\/span> <span class=\"err\">+<\/span> <span class=\"m\">0.5rem<\/span><span class=\"p\">,<\/span> <span class=\"m\">1.5rem<\/span><span class=\"p\">);<\/span>\n  <span class=\"p\">}<\/span>\n\n  <span class=\"nt\">h6<\/span> <span class=\"p\">{<\/span>\n    <span class=\"err\">@apply<\/span> <span class=\"err\">mb-4<\/span> <span class=\"err\">font-bold;<\/span>\n    <span class=\"nl\">font-size<\/span><span class=\"p\">:<\/span> <span class=\"n\">clamp<\/span><span class=\"p\">(<\/span><span class=\"m\">1rem<\/span><span class=\"p\">,<\/span> <span class=\"m\">1vw<\/span> <span class=\"err\">+<\/span> <span class=\"m\">0.5rem<\/span><span class=\"p\">,<\/span> <span class=\"m\">1.25rem<\/span><span class=\"p\">);<\/span>\n  <span class=\"p\">}<\/span>\n\n\n  <span class=\"c\">\/*\n   |-----------------------------------------------------------------------------\n   | PAR\u00c1GRAFOS (P) E TEXTO EM GERAL\n   |-----------------------------------------------------------------------------\n   | Damos um espa\u00e7amento (margin-bottom) e um tamanho de fonte confort\u00e1vel.\n   | sm:text-xl faz com que, em telas no breakpoint \"sm\" (ex: &gt;= 640px), \n   | o texto fique maior.\n   *\/<\/span>\n  <span class=\"c\">\/* p {\n    @apply mb-6 text-lg leading-relaxed sm:text-xl;\n  } *\/<\/span>\n\n  <span class=\"nt\">p<\/span> <span class=\"p\">{<\/span>\n    <span class=\"err\">@apply<\/span> <span class=\"err\">mb-6<\/span> <span class=\"err\">leading-relaxed;<\/span>\n    <span class=\"nl\">font-size<\/span><span class=\"p\">:<\/span> <span class=\"n\">clamp<\/span><span class=\"p\">(<\/span><span class=\"m\">1rem<\/span><span class=\"p\">,<\/span> <span class=\"m\">1.5vw<\/span> <span class=\"err\">+<\/span> <span class=\"m\">0.5rem<\/span><span class=\"p\">,<\/span> <span class=\"m\">1.25rem<\/span><span class=\"p\">);<\/span>\n  <span class=\"p\">}<\/span>\n\n  <span class=\"c\">\/*\n   |-----------------------------------------------------------------------------\n   | LINKS (A)\n   |-----------------------------------------------------------------------------\n   | Usamos a cor de destaque (var(--accent)) e sublinhado. \n   | O :hover diminui a opacidade para dar um efeito de feedback ao usu\u00e1rio.\n   *\/<\/span>\n  <span class=\"nt\">a<\/span> <span class=\"p\">{<\/span>\n    <span class=\"nl\">color<\/span><span class=\"p\">:<\/span> <span class=\"n\">var<\/span><span class=\"p\">(<\/span><span class=\"n\">--accent<\/span><span class=\"p\">);<\/span>\n    <span class=\"err\">@apply<\/span> <span class=\"py\">hover<\/span><span class=\"p\">:<\/span><span class=\"nb\">underline<\/span> <span class=\"n\">hover<\/span><span class=\"p\">:<\/span><span class=\"n\">opacity-80<\/span><span class=\"p\">;<\/span>\n  <span class=\"p\">}<\/span>\n\n  <span class=\"c\">\/*\n   |-----------------------------------------------------------------------------\n   | TEXTO EM NEGRITO (STRONG) E IT\u00c1LICO (EM)\n   |-----------------------------------------------------------------------------\n   | Mantemos a sem\u00e2ntica e a \u00eanfase visualmente clara.\n   *\/<\/span>\n  <span class=\"nt\">strong<\/span> <span class=\"p\">{<\/span>\n    <span class=\"err\">@apply<\/span> <span class=\"err\">font-bold;<\/span>\n  <span class=\"p\">}<\/span>\n\n  <span class=\"nt\">em<\/span> <span class=\"p\">{<\/span>\n    <span class=\"err\">@apply<\/span> <span class=\"err\">italic;<\/span>\n  <span class=\"p\">}<\/span>\n\n  <span class=\"c\">\/*\n   |-----------------------------------------------------------------------------\n   | LISTAS (UL, OL)\n   |-----------------------------------------------------------------------------\n   | Definimos margens, padding \u00e0 esquerda e estilos de lista (disc, decimal).\n   *\/<\/span>\n  <span class=\"nt\">ul<\/span><span class=\"o\">,<\/span>\n  <span class=\"nt\">ol<\/span> <span class=\"p\">{<\/span>\n    <span class=\"err\">@apply<\/span> <span class=\"err\">mb-6<\/span> <span class=\"err\">pl-8;<\/span>\n  <span class=\"p\">}<\/span>\n\n  <span class=\"c\">\/* li {\n    @apply mb-2 text-lg sm:text-xl;\n  } *\/<\/span>\n\n  <span class=\"nt\">li<\/span> <span class=\"p\">{<\/span>\n    <span class=\"err\">@apply<\/span> <span class=\"err\">mb-2;<\/span>\n    <span class=\"nl\">font-size<\/span><span class=\"p\">:<\/span> <span class=\"n\">clamp<\/span><span class=\"p\">(<\/span><span class=\"m\">1rem<\/span><span class=\"p\">,<\/span> <span class=\"m\">1.5vw<\/span> <span class=\"err\">+<\/span> <span class=\"m\">0.5rem<\/span><span class=\"p\">,<\/span> <span class=\"m\">1.25rem<\/span><span class=\"p\">);<\/span>\n  <span class=\"p\">}<\/span>\n\n  <span class=\"nt\">ul<\/span> <span class=\"o\">&gt;<\/span> <span class=\"nt\">li<\/span> <span class=\"p\">{<\/span>\n    <span class=\"err\">@apply<\/span> <span class=\"err\">list-disc;<\/span>\n  <span class=\"p\">}<\/span>\n\n  <span class=\"nt\">ol<\/span> <span class=\"o\">&gt;<\/span> <span class=\"nt\">li<\/span> <span class=\"p\">{<\/span>\n    <span class=\"err\">@apply<\/span> <span class=\"err\">list-decimal;<\/span>\n  <span class=\"p\">}<\/span>\n\n  <span class=\"c\">\/*\n   |-----------------------------------------------------------------------------\n   | BLOCOS DE C\u00d3DIGO (PRE, CODE)\n   |-----------------------------------------------------------------------------\n   | Usados para exibir trechos de c\u00f3digo de forma destacada. \n   | O overflow-x-auto faz com que apare\u00e7a scroll horizontal em c\u00f3digos longos.\n   *\/<\/span>\n  <span class=\"nt\">pre<\/span> <span class=\"p\">{<\/span>\n    <span class=\"err\">@apply<\/span> <span class=\"err\">mb-6<\/span> <span class=\"err\">overflow-x-auto<\/span> <span class=\"err\">rounded-lg<\/span> <span class=\"err\">p-4;<\/span>\n    <span class=\"nl\">background-color<\/span><span class=\"p\">:<\/span> <span class=\"n\">var<\/span><span class=\"p\">(<\/span><span class=\"n\">--background-code<\/span><span class=\"p\">);<\/span>\n  <span class=\"p\">}<\/span>\n\n  <span class=\"nt\">code<\/span> <span class=\"p\">{<\/span>\n    <span class=\"err\">@apply<\/span> <span class=\"err\">rounded<\/span> <span class=\"err\">px-1<\/span> <span class=\"err\">font-mono<\/span> <span class=\"err\">text-sm;<\/span>\n    <span class=\"nl\">background-color<\/span><span class=\"p\">:<\/span> <span class=\"n\">var<\/span><span class=\"p\">(<\/span><span class=\"n\">--background-code<\/span><span class=\"p\">);<\/span>\n  <span class=\"p\">}<\/span>\n\n  <span class=\"c\">\/*\n   |-----------------------------------------------------------------------------\n   | BLOCKQUOTE (CITA\u00c7\u00d5ES)\n   |-----------------------------------------------------------------------------\n   | Recuo (padding-left), texto em it\u00e1lico e borda esquerda na cor de destaque.\n   *\/<\/span>\n  <span class=\"nt\">blockquote<\/span> <span class=\"p\">{<\/span>\n    <span class=\"err\">@apply<\/span> <span class=\"err\">mb-6<\/span> <span class=\"err\">pl-4<\/span> <span class=\"err\">italic;<\/span>\n    <span class=\"nl\">border-left<\/span><span class=\"p\">:<\/span> <span class=\"m\">4px<\/span> <span class=\"nb\">solid<\/span> <span class=\"n\">var<\/span><span class=\"p\">(<\/span><span class=\"n\">--accent<\/span><span class=\"p\">);<\/span>\n  <span class=\"p\">}<\/span>\n\n  <span class=\"c\">\/*\n   |-----------------------------------------------------------------------------\n   | TABELAS (TABLE, TH, TD)\n   |-----------------------------------------------------------------------------\n   | Tabelas ocupando toda a largura (w-full) e sem espa\u00e7os entre as c\u00e9lulas\n   | (border-collapse). Tamb\u00e9m definimos bordas para separar conte\u00fado.\n   *\/<\/span>\n  <span class=\"nt\">table<\/span> <span class=\"p\">{<\/span>\n    <span class=\"err\">@apply<\/span> <span class=\"err\">mb-6<\/span> <span class=\"err\">w-full<\/span> <span class=\"err\">border-collapse;<\/span>\n  <span class=\"p\">}<\/span>\n\n  <span class=\"nt\">th<\/span> <span class=\"p\">{<\/span>\n    <span class=\"err\">@apply<\/span> <span class=\"err\">p-2<\/span> <span class=\"err\">text-left<\/span> <span class=\"err\">font-bold;<\/span>\n    <span class=\"nl\">border-bottom<\/span><span class=\"p\">:<\/span> <span class=\"m\">2px<\/span> <span class=\"nb\">solid<\/span> <span class=\"n\">var<\/span><span class=\"p\">(<\/span><span class=\"n\">--border<\/span><span class=\"p\">);<\/span>\n  <span class=\"p\">}<\/span>\n\n  <span class=\"nt\">td<\/span> <span class=\"p\">{<\/span>\n    <span class=\"err\">@apply<\/span> <span class=\"err\">p-2;<\/span>\n    <span class=\"nl\">border-bottom<\/span><span class=\"p\">:<\/span> <span class=\"m\">1px<\/span> <span class=\"nb\">solid<\/span> <span class=\"n\">var<\/span><span class=\"p\">(<\/span><span class=\"n\">--border<\/span><span class=\"p\">);<\/span>\n  <span class=\"p\">}<\/span>\n\n  <span class=\"c\">\/*\n   |-----------------------------------------------------------------------------\n   | FORMUL\u00c1RIOS (INPUT, TEXTAREA, SELECT)\n   |-----------------------------------------------------------------------------\n   | Unificamos a estiliza\u00e7\u00e3o para v\u00e1rios tipos de input:\n   | - Todos ter\u00e3o largura cheia (w-full), padding, bordas arredondadas e \n   |   cor de fundo conforme o tema.\n   | - A borda usa nossa vari\u00e1vel de cor de borda.\n   *\/<\/span>\n  <span class=\"nt\">input<\/span><span class=\"o\">[<\/span><span class=\"nt\">type<\/span><span class=\"o\">=<\/span><span class=\"s1\">\"email\"<\/span><span class=\"o\">],<\/span>\n  <span class=\"nt\">input<\/span><span class=\"o\">[<\/span><span class=\"nt\">type<\/span><span class=\"o\">=<\/span><span class=\"s1\">\"password\"<\/span><span class=\"o\">],<\/span>\n  <span class=\"nt\">input<\/span><span class=\"o\">[<\/span><span class=\"nt\">type<\/span><span class=\"o\">=<\/span><span class=\"s1\">\"search\"<\/span><span class=\"o\">],<\/span>\n  <span class=\"nt\">input<\/span><span class=\"o\">[<\/span><span class=\"nt\">type<\/span><span class=\"o\">=<\/span><span class=\"s1\">\"text\"<\/span><span class=\"o\">],<\/span>\n  <span class=\"nt\">input<\/span><span class=\"o\">[<\/span><span class=\"nt\">type<\/span><span class=\"o\">=<\/span><span class=\"s1\">\"url\"<\/span><span class=\"o\">],<\/span>\n  <span class=\"nt\">input<\/span><span class=\"o\">[<\/span><span class=\"nt\">type<\/span><span class=\"o\">=<\/span><span class=\"s1\">\"number\"<\/span><span class=\"o\">],<\/span>\n  <span class=\"nt\">input<\/span><span class=\"o\">[<\/span><span class=\"nt\">type<\/span><span class=\"o\">=<\/span><span class=\"s1\">\"date\"<\/span><span class=\"o\">],<\/span>\n  <span class=\"nt\">input<\/span><span class=\"o\">[<\/span><span class=\"nt\">type<\/span><span class=\"o\">=<\/span><span class=\"s1\">\"datetime-local\"<\/span><span class=\"o\">],<\/span>\n  <span class=\"nt\">input<\/span><span class=\"o\">[<\/span><span class=\"nt\">type<\/span><span class=\"o\">=<\/span><span class=\"s1\">\"month\"<\/span><span class=\"o\">],<\/span>\n  <span class=\"nt\">input<\/span><span class=\"o\">[<\/span><span class=\"nt\">type<\/span><span class=\"o\">=<\/span><span class=\"s1\">\"week\"<\/span><span class=\"o\">],<\/span>\n  <span class=\"nt\">input<\/span><span class=\"o\">[<\/span><span class=\"nt\">type<\/span><span class=\"o\">=<\/span><span class=\"s1\">\"time\"<\/span><span class=\"o\">],<\/span>\n  <span class=\"nt\">input<\/span><span class=\"o\">[<\/span><span class=\"nt\">type<\/span><span class=\"o\">=<\/span><span class=\"s1\">\"tel\"<\/span><span class=\"o\">],<\/span>\n  <span class=\"nt\">select<\/span><span class=\"o\">[<\/span><span class=\"nt\">multiple<\/span><span class=\"o\">],<\/span>\n  <span class=\"nt\">input<\/span><span class=\"o\">,<\/span>\n  <span class=\"nt\">textarea<\/span><span class=\"o\">,<\/span>\n  <span class=\"nt\">select<\/span> <span class=\"p\">{<\/span>\n    <span class=\"err\">@apply<\/span> <span class=\"err\">w-full<\/span> <span class=\"err\">rounded-lg<\/span> <span class=\"err\">p-2;<\/span>\n    <span class=\"nl\">background-color<\/span><span class=\"p\">:<\/span> <span class=\"n\">var<\/span><span class=\"p\">(<\/span><span class=\"n\">--background<\/span><span class=\"p\">);<\/span>\n    <span class=\"nl\">border<\/span><span class=\"p\">:<\/span> <span class=\"m\">1px<\/span> <span class=\"nb\">solid<\/span> <span class=\"n\">var<\/span><span class=\"p\">(<\/span><span class=\"n\">--form-border<\/span><span class=\"p\">);<\/span>\n  <span class=\"p\">}<\/span>\n\n  <span class=\"c\">\/*\n   |-----------------------------------------------------------------------------\n   | ESTADO DE FOCUS EM FORMUL\u00c1RIOS\n   |-----------------------------------------------------------------------------\n   | outline-none remove as bordas padr\u00e3o do navegador,\n   | e adicionamos um box-shadow para indicar que est\u00e1 em foco.\n   *\/<\/span>\n   <span class=\"nt\">input<\/span><span class=\"o\">[<\/span><span class=\"nt\">type<\/span><span class=\"o\">=<\/span><span class=\"s1\">\"email\"<\/span><span class=\"o\">]<\/span><span class=\"nd\">:focus<\/span><span class=\"o\">,<\/span>\n   <span class=\"nt\">input<\/span><span class=\"o\">[<\/span><span class=\"nt\">type<\/span><span class=\"o\">=<\/span><span class=\"s1\">\"password\"<\/span><span class=\"o\">]<\/span><span class=\"nd\">:focus<\/span><span class=\"o\">,<\/span>\n   <span class=\"nt\">input<\/span><span class=\"o\">[<\/span><span class=\"nt\">type<\/span><span class=\"o\">=<\/span><span class=\"s1\">\"search\"<\/span><span class=\"o\">]<\/span><span class=\"nd\">:focus<\/span><span class=\"o\">,<\/span>\n   <span class=\"nt\">input<\/span><span class=\"o\">[<\/span><span class=\"nt\">type<\/span><span class=\"o\">=<\/span><span class=\"s1\">\"text\"<\/span><span class=\"o\">]<\/span><span class=\"nd\">:focus<\/span><span class=\"o\">,<\/span>\n   <span class=\"nt\">input<\/span><span class=\"o\">[<\/span><span class=\"nt\">type<\/span><span class=\"o\">=<\/span><span class=\"s1\">\"url\"<\/span><span class=\"o\">]<\/span><span class=\"nd\">:focus<\/span><span class=\"o\">,<\/span>\n   <span class=\"nt\">input<\/span><span class=\"o\">[<\/span><span class=\"nt\">type<\/span><span class=\"o\">=<\/span><span class=\"s1\">\"number\"<\/span><span class=\"o\">]<\/span><span class=\"nd\">:focus<\/span><span class=\"o\">,<\/span>\n   <span class=\"nt\">input<\/span><span class=\"o\">[<\/span><span class=\"nt\">type<\/span><span class=\"o\">=<\/span><span class=\"s1\">\"date\"<\/span><span class=\"o\">]<\/span><span class=\"nd\">:focus<\/span><span class=\"o\">,<\/span>\n   <span class=\"nt\">input<\/span><span class=\"o\">[<\/span><span class=\"nt\">type<\/span><span class=\"o\">=<\/span><span class=\"s1\">\"datetime-local\"<\/span><span class=\"o\">]<\/span><span class=\"nd\">:focus<\/span><span class=\"o\">,<\/span>\n   <span class=\"nt\">input<\/span><span class=\"o\">[<\/span><span class=\"nt\">type<\/span><span class=\"o\">=<\/span><span class=\"s1\">\"month\"<\/span><span class=\"o\">]<\/span><span class=\"nd\">:focus<\/span><span class=\"o\">,<\/span>\n   <span class=\"nt\">input<\/span><span class=\"o\">[<\/span><span class=\"nt\">type<\/span><span class=\"o\">=<\/span><span class=\"s1\">\"week\"<\/span><span class=\"o\">]<\/span><span class=\"nd\">:focus<\/span><span class=\"o\">,<\/span>\n   <span class=\"nt\">input<\/span><span class=\"o\">[<\/span><span class=\"nt\">type<\/span><span class=\"o\">=<\/span><span class=\"s1\">\"time\"<\/span><span class=\"o\">]<\/span><span class=\"nd\">:focus<\/span><span class=\"o\">,<\/span>\n   <span class=\"nt\">input<\/span><span class=\"o\">[<\/span><span class=\"nt\">type<\/span><span class=\"o\">=<\/span><span class=\"s1\">\"tel\"<\/span><span class=\"o\">]<\/span><span class=\"nd\">:focus<\/span><span class=\"o\">,<\/span>\n   <span class=\"nt\">select<\/span><span class=\"o\">[<\/span><span class=\"nt\">multiple<\/span><span class=\"o\">]<\/span><span class=\"nd\">:focus<\/span><span class=\"o\">,<\/span>\n   <span class=\"nt\">input<\/span><span class=\"nd\">:focus<\/span><span class=\"o\">,<\/span>\n   <span class=\"nt\">textarea<\/span><span class=\"nd\">:focus<\/span><span class=\"o\">,<\/span>\n   <span class=\"nt\">select<\/span><span class=\"nd\">:focus<\/span> <span class=\"p\">{<\/span>\n    <span class=\"err\">@apply<\/span> <span class=\"err\">outline-none;<\/span>\n    <span class=\"nl\">box-shadow<\/span><span class=\"p\">:<\/span> <span class=\"m\">0<\/span> <span class=\"m\">0<\/span> <span class=\"m\">0<\/span> <span class=\"m\">2px<\/span> <span class=\"n\">var<\/span><span class=\"p\">(<\/span><span class=\"n\">--focus-ring<\/span><span class=\"p\">);<\/span>\n  <span class=\"p\">}<\/span>\n\n  <span class=\"c\">\/*\n   |-----------------------------------------------------------------------------\n   | BOT\u00d5ES (BUTTON, INPUT[TYPE=BUTTON\/SUBMIT\/RESET\/FILE])\n   |-----------------------------------------------------------------------------\n   | Usamos a cor de destaque (accent) para o fundo e o texto fica branco.\n   | Adicionamos hover e transition para ficar mais agrad\u00e1vel ao usu\u00e1rio.\n   *\/<\/span>\n  <span class=\"nt\">input<\/span><span class=\"o\">[<\/span><span class=\"nt\">type<\/span><span class=\"o\">=<\/span><span class=\"s1\">\"button\"<\/span><span class=\"o\">],<\/span>\n  <span class=\"nt\">input<\/span><span class=\"o\">[<\/span><span class=\"nt\">type<\/span><span class=\"o\">=<\/span><span class=\"s1\">\"submit\"<\/span><span class=\"o\">],<\/span>\n  <span class=\"nt\">input<\/span><span class=\"o\">[<\/span><span class=\"nt\">type<\/span><span class=\"o\">=<\/span><span class=\"s1\">\"reset\"<\/span><span class=\"o\">],<\/span>\n  <span class=\"nd\">::file-selector-button<\/span><span class=\"o\">,<\/span>\n  <span class=\"nt\">button<\/span> <span class=\"p\">{<\/span>\n    <span class=\"err\">@apply<\/span> <span class=\"err\">rounded-lg<\/span> <span class=\"err\">px-4<\/span> <span class=\"err\">py-2<\/span> <span class=\"err\">text-white<\/span> <span class=\"err\">transition-opacity<\/span> <span class=\"py\">hover<\/span><span class=\"p\">:<\/span><span class=\"n\">opacity-90<\/span><span class=\"p\">;<\/span>\n    <span class=\"nl\">background-color<\/span><span class=\"p\">:<\/span> <span class=\"n\">var<\/span><span class=\"p\">(<\/span><span class=\"n\">--accent<\/span><span class=\"p\">);<\/span>\n  <span class=\"p\">}<\/span>\n\n  <span class=\"c\">\/*\n   |-----------------------------------------------------------------------------\n   | IMAGENS E M\u00cdDIA (IMG, VIDEO, AUDIO)\n   |-----------------------------------------------------------------------------\n   | As imagens ter\u00e3o largura m\u00e1xima de 100% (max-w-full) e altura autom\u00e1tica \n   | (h-auto) para ficarem responsivas, centralizadas (ms-auto), al\u00e9m de bordas arredondadas (rounded-lg).\n   *\/<\/span>\n  <span class=\"nt\">img<\/span> <span class=\"p\">{<\/span>\n    <span class=\"err\">@apply<\/span> <span class=\"err\">mx-auto<\/span> <span class=\"err\">mb-6<\/span> <span class=\"err\">h-auto<\/span> <span class=\"err\">max-w-full<\/span> <span class=\"err\">rounded-lg<\/span> <span class=\"py\">hover<\/span><span class=\"p\">:<\/span><span class=\"n\">scale-<\/span><span class=\"p\">[<\/span><span class=\"m\">1.02<\/span><span class=\"p\">];<\/span>\n  <span class=\"p\">}<\/span>\n\n  <span class=\"c\">\/* Figcaption (legendas de imagem) *\/<\/span>\n  <span class=\"nt\">figcaption<\/span> <span class=\"p\">{<\/span>\n    <span class=\"err\">@apply<\/span> <span class=\"err\">mt-2<\/span> <span class=\"err\">text-sm<\/span> <span class=\"err\">italic;<\/span>\n    <span class=\"nl\">text-align<\/span><span class=\"p\">:<\/span> <span class=\"nb\">center<\/span><span class=\"p\">;<\/span>\n  <span class=\"p\">}<\/span>\n\n  <span class=\"nt\">video<\/span><span class=\"o\">,<\/span>\n  <span class=\"nt\">audio<\/span> <span class=\"p\">{<\/span>\n    <span class=\"err\">@apply<\/span> <span class=\"err\">mb-6<\/span> <span class=\"err\">w-full;<\/span>\n  <span class=\"p\">}<\/span>\n\n  <span class=\"c\">\/*\n   |-----------------------------------------------------------------------------\n   | DIVISORES (HR)\n   |-----------------------------------------------------------------------------\n   | Linha horizontal para separar se\u00e7\u00f5es de conte\u00fado.\n   | Usamos var(--border) para a cor da borda, de acordo com o tema.\n   *\/<\/span>\n  <span class=\"nt\">hr<\/span> <span class=\"p\">{<\/span>\n    <span class=\"err\">@apply<\/span> <span class=\"err\">my-8;<\/span>\n    <span class=\"nl\">border-top<\/span><span class=\"p\">:<\/span> <span class=\"m\">1px<\/span> <span class=\"nb\">solid<\/span> <span class=\"n\">var<\/span><span class=\"p\">(<\/span><span class=\"n\">--border<\/span><span class=\"p\">);<\/span>\n  <span class=\"p\">}<\/span>\n<span class=\"p\">}<\/span>\n\n<span class=\"c\">\/* \n |-----------------------------------------------------------------------------\n | UTILIT\u00c1RIOS PERSONALIZADOS\n |-----------------------------------------------------------------------------\n | A camada utilities (layer utilities) \u00e9 onde definimos classes utilit\u00e1rias \n | adicionais, caso as classes do Tailwind n\u00e3o cubram nossas necessidades.\n *\/<\/span>\n<span class=\"k\">@layer<\/span> <span class=\"n\">utilities<\/span> <span class=\"p\">{<\/span>\n  <span class=\"c\">\/*\n   |-----------------------------------------------------------------------------\n   | CONTENT-WRAPPER\n   |-----------------------------------------------------------------------------\n   | Caso queiramos reaproveitar o max-w-4xl e o mx-auto + px-4 em um \n   | container espec\u00edfico.\n   *\/<\/span>\n  <span class=\"nc\">.content-wrapper<\/span> <span class=\"p\">{<\/span>\n    <span class=\"err\">@apply<\/span> <span class=\"err\">mx-auto<\/span> <span class=\"err\">max-w-4xl<\/span> <span class=\"err\">px-4;<\/span>\n  <span class=\"p\">}<\/span>\n\n  <span class=\"c\">\/*\n   |-----------------------------------------------------------------------------\n   | TEXT-BALANCE\n   |-----------------------------------------------------------------------------\n   | Propriedade moderna (text-wrap: balance) que melhora a distribui\u00e7\u00e3o \n   | de palavras, mas n\u00e3o \u00e9 suportada em todos os navegadores.\n   | Lembre de testar compatibilidade.\n   *\/<\/span>\n  <span class=\"nc\">.text-balance<\/span> <span class=\"p\">{<\/span>\n    <span class=\"nl\">text-wrap<\/span><span class=\"p\">:<\/span> <span class=\"n\">balance<\/span><span class=\"p\">;<\/span>\n  <span class=\"p\">}<\/span>\n\n  <span class=\"c\">\/*\n   |-----------------------------------------------------------------------------\n   | PROSE\n   |-----------------------------------------------------------------------------\n   | Caso queira um estilo de texto ao estilo \"prose\" do Tailwind, mas \n   | sem o limite padr\u00e3o de largura.\n   *\/<\/span>\n  <span class=\"nc\">.prose<\/span> <span class=\"p\">{<\/span>\n    <span class=\"err\">@apply<\/span> <span class=\"err\">max-w-none;<\/span>\n  <span class=\"p\">}<\/span>\n\n  <span class=\"c\">\/*\n   |-----------------------------------------------------------------------------\n   | PROSE &gt; IMG\n   |-----------------------------------------------------------------------------\n   | Exemplo de como centralizar imagens dentro de um container .prose.\n   *\/<\/span>\n  <span class=\"nc\">.prose<\/span> <span class=\"nt\">img<\/span> <span class=\"p\">{<\/span>\n    <span class=\"err\">@apply<\/span> <span class=\"err\">mx-auto;<\/span>\n  <span class=\"p\">}<\/span>\n<span class=\"p\">}<\/span>\n\n<span class=\"c\">\/* \n---\n\n *\/<\/span>\n\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/details>\n<h3><span class=\"ez-toc-section\" id=\"%D9%85%D8%AD%D8%AA%D9%88%DB%8C%D8%A7%D8%AA_%D8%AF%D9%88%D9%85%DB%8C%D9%86_%D9%81%D8%A7%DB%8C%D9%84_%D8%B3%D9%81%D8%A7%D8%B1%D8%B4%DB%8C_Tailwind_%D8%B1%D8%A7_%D8%AF%D8%B1_%D8%A2%D9%86_%D9%82%D8%B1%D8%A7%D8%B1_%D8%AF%D9%87%DB%8C%D8%AF_custom2css\"><\/span>\n<p>  \u0645\u062d\u062a\u0648\u06cc\u0627\u062a \u062f\u0648\u0645\u06cc\u0646 \u0641\u0627\u06cc\u0644 \u0633\u0641\u0627\u0631\u0634\u06cc Tailwind \u0631\u0627 \u062f\u0631 \u0622\u0646 \u0642\u0631\u0627\u0631 \u062f\u0647\u06cc\u062f <code>custom2.css<\/code><br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<details>\n<summary>\u0646\u0645\u0627\u06cc\u0634 \u0628\u06cc\u0634\u062a\u0631\u2026<\/summary>\n<p>\u0641\u0627\u06cc\u0644 \u0631\u0627 \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f <code>app\/assets\/stylesheets\/custom_tailwind\/custom2.css<\/code> \u0648 \u0645\u0637\u0627\u0644\u0628 \u0632\u06cc\u0631 \u0631\u0627 \u06a9\u067e\u06cc \u06a9\u0646\u06cc\u062f<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight css\"><code><span class=\"c\">\/* =================================================================\n   CONFIGURA\u00c7\u00c3O DE VARI\u00c1VEIS CSS\n   Defini\u00e7\u00e3o centralizada de todas as vari\u00e1veis do projeto\n   ================================================================= *\/<\/span>\n<span class=\"nd\">:root<\/span> <span class=\"p\">{<\/span>\n  <span class=\"c\">\/* Cores - Tema Claro *\/<\/span>\n  <span class=\"py\">--color-primary<\/span><span class=\"p\">:<\/span> <span class=\"m\">#2563eb<\/span><span class=\"p\">;<\/span> <span class=\"c\">\/* blue-600 do Tailwind *\/<\/span>\n  <span class=\"py\">--color-primary-hover<\/span><span class=\"p\">:<\/span> <span class=\"m\">#1d4ed8<\/span><span class=\"p\">;<\/span> <span class=\"c\">\/* blue-700 do Tailwind *\/<\/span>\n  <span class=\"py\">--color-background<\/span><span class=\"p\">:<\/span> <span class=\"m\">#ffffff<\/span><span class=\"p\">;<\/span>\n  <span class=\"py\">--color-text<\/span><span class=\"p\">:<\/span> <span class=\"m\">#1f2937<\/span><span class=\"p\">;<\/span> <span class=\"c\">\/* gray-800 do Tailwind *\/<\/span>\n  <span class=\"py\">--color-text-muted<\/span><span class=\"p\">:<\/span> <span class=\"m\">#4b5563<\/span><span class=\"p\">;<\/span> <span class=\"c\">\/* gray-600 do Tailwind *\/<\/span>\n  <span class=\"py\">--color-border<\/span><span class=\"p\">:<\/span> <span class=\"m\">#d1d5db<\/span><span class=\"p\">;<\/span> <span class=\"c\">\/* gray-300 do Tailwind *\/<\/span>\n  <span class=\"py\">--color-input-bg<\/span><span class=\"p\">:<\/span> <span class=\"m\">#f9fafb<\/span><span class=\"p\">;<\/span> <span class=\"c\">\/* gray-50 do Tailwind *\/<\/span>\n  <span class=\"py\">--color-code-bg<\/span><span class=\"p\">:<\/span> <span class=\"m\">#f3f4f6<\/span><span class=\"p\">;<\/span> <span class=\"c\">\/* gray-100 do Tailwind *\/<\/span>\n  <span class=\"py\">--color-code-text<\/span><span class=\"p\">:<\/span> <span class=\"m\">#273e65<\/span><span class=\"p\">;<\/span> <span class=\"c\">\/* blue-800 do Tailwind *\/<\/span>\n\n  <span class=\"c\">\/* Espa\u00e7amento *\/<\/span>\n  <span class=\"py\">--spacing-base<\/span><span class=\"p\">:<\/span> <span class=\"m\">1rem<\/span><span class=\"p\">;<\/span>\n  <span class=\"py\">--spacing-lg<\/span><span class=\"p\">:<\/span> <span class=\"m\">1.5rem<\/span><span class=\"p\">;<\/span>\n  <span class=\"py\">--spacing-xl<\/span><span class=\"p\">:<\/span> <span class=\"m\">2rem<\/span><span class=\"p\">;<\/span>\n\n  <span class=\"c\">\/* Border Radius *\/<\/span>\n  <span class=\"py\">--radius-base<\/span><span class=\"p\">:<\/span> <span class=\"m\">0.375rem<\/span><span class=\"p\">;<\/span>\n  <span class=\"py\">--radius-lg<\/span><span class=\"p\">:<\/span> <span class=\"m\">0.5rem<\/span><span class=\"p\">;<\/span>\n\n  <span class=\"c\">\/* Larguras M\u00e1ximas *\/<\/span>\n  <span class=\"py\">--max-width-content<\/span><span class=\"p\">:<\/span> <span class=\"m\">48rem<\/span><span class=\"p\">;<\/span> <span class=\"c\">\/* 768px *\/<\/span>\n<span class=\"p\">}<\/span>\n\n<span class=\"c\">\/* Configura\u00e7\u00e3o do tema escuro usando prefers-color-scheme *\/<\/span>\n<span class=\"k\">@media<\/span> <span class=\"p\">(<\/span><span class=\"n\">prefers-color-scheme<\/span><span class=\"p\">:<\/span> <span class=\"n\">dark<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n  <span class=\"nd\">:root<\/span> <span class=\"p\">{<\/span>\n    <span class=\"c\">\/* Cores - Tema Escuro *\/<\/span>\n    <span class=\"py\">--color-primary<\/span><span class=\"p\">:<\/span> <span class=\"m\">#0284c7<\/span><span class=\"p\">;<\/span> <span class=\"c\">\/* sky-600 do Tailwind *\/<\/span>\n    <span class=\"py\">--color-primary-hover<\/span><span class=\"p\">:<\/span> <span class=\"m\">#6990c7<\/span><span class=\"p\">;<\/span> <span class=\"c\">\/* blue-400 do Tailwind *\/<\/span>\n    <span class=\"py\">--color-background<\/span><span class=\"p\">:<\/span> <span class=\"m\">#111827<\/span><span class=\"p\">;<\/span> <span class=\"c\">\/* gray-900 do Tailwind *\/<\/span>\n    <span class=\"py\">--color-text<\/span><span class=\"p\">:<\/span> <span class=\"m\">#f3f4f6<\/span><span class=\"p\">;<\/span> <span class=\"c\">\/* gray-100 do Tailwind *\/<\/span>\n    <span class=\"py\">--color-text-muted<\/span><span class=\"p\">:<\/span> <span class=\"m\">#9ca3af<\/span><span class=\"p\">;<\/span> <span class=\"c\">\/* gray-400 do Tailwind *\/<\/span>\n    <span class=\"py\">--color-border<\/span><span class=\"p\">:<\/span> <span class=\"m\">#374151<\/span><span class=\"p\">;<\/span> <span class=\"c\">\/* gray-700 do Tailwind *\/<\/span>\n    <span class=\"py\">--color-input-bg<\/span><span class=\"p\">:<\/span> <span class=\"m\">#1f2937<\/span><span class=\"p\">;<\/span> <span class=\"c\">\/* gray-800 do Tailwind *\/<\/span>\n    <span class=\"py\">--color-code-bg<\/span><span class=\"p\">:<\/span> <span class=\"m\">#1f2937<\/span><span class=\"p\">;<\/span> <span class=\"c\">\/* gray-800 do Tailwind *\/<\/span>\n    <span class=\"py\">--color-code-text<\/span><span class=\"p\">:<\/span> <span class=\"m\">#e8ecf6<\/span><span class=\"p\">;<\/span> <span class=\"c\">\/* blue-100 do Tailwind *\/<\/span>\n  <span class=\"p\">}<\/span>\n<span class=\"p\">}<\/span>\n\n<span class=\"c\">\/* Importa\u00e7\u00f5es do Tailwind *\/<\/span>\n<span class=\"k\">@tailwind<\/span> <span class=\"n\">base<\/span><span class=\"p\">;<\/span>\n<span class=\"k\">@tailwind<\/span> <span class=\"n\">components<\/span><span class=\"p\">;<\/span>\n<span class=\"k\">@tailwind<\/span> <span class=\"n\">utilities<\/span><span class=\"p\">;<\/span>\n\n<span class=\"c\">\/* =================================================================\n     ESTILOS BASE\n     Configura\u00e7\u00f5es globais e reset de elementos HTML\n     ================================================================= *\/<\/span>\n<span class=\"k\">@layer<\/span> <span class=\"n\">base<\/span> <span class=\"p\">{<\/span>\n  <span class=\"nt\">body<\/span> <span class=\"p\">{<\/span>\n    <span class=\"err\">@apply<\/span> <span class=\"err\">mx-auto<\/span> <span class=\"err\">max-w-3xl<\/span> <span class=\"err\">px-4<\/span> <span class=\"err\">leading-relaxed<\/span> <span class=\"err\">tracking-wide<\/span> <span class=\"py\">sm<\/span><span class=\"p\">:<\/span><span class=\"n\">px-6<\/span> <span class=\"n\">md<\/span><span class=\"p\">:<\/span><span class=\"n\">px-8<\/span> <span class=\"n\">lg<\/span><span class=\"p\">:<\/span><span class=\"n\">px-12<\/span><span class=\"p\">;<\/span>\n    <span class=\"nl\">background-color<\/span><span class=\"p\">:<\/span> <span class=\"n\">var<\/span><span class=\"p\">(<\/span><span class=\"n\">--color-background<\/span><span class=\"p\">);<\/span>\n    <span class=\"nl\">color<\/span><span class=\"p\">:<\/span> <span class=\"n\">var<\/span><span class=\"p\">(<\/span><span class=\"n\">--color-text<\/span><span class=\"p\">);<\/span>\n    <span class=\"nl\">font-family<\/span><span class=\"p\">:<\/span>\n      <span class=\"n\">system-ui<\/span><span class=\"p\">,<\/span>\n      <span class=\"n\">-apple-system<\/span><span class=\"p\">,<\/span>\n      <span class=\"n\">BlinkMacSystemFont<\/span><span class=\"p\">,<\/span>\n      <span class=\"s1\">\"Segoe UI\"<\/span><span class=\"p\">,<\/span>\n      <span class=\"n\">Roboto<\/span><span class=\"p\">,<\/span>\n      <span class=\"s1\">\"Helvetica Neue\"<\/span><span class=\"p\">,<\/span>\n      <span class=\"n\">Arial<\/span><span class=\"p\">,<\/span>\n      <span class=\"nb\">sans-serif<\/span><span class=\"p\">;<\/span>\n      <span class=\"nl\">line-height<\/span><span class=\"p\">:<\/span> <span class=\"n\">clamp<\/span><span class=\"p\">(<\/span><span class=\"m\">1.5<\/span><span class=\"p\">,<\/span> <span class=\"m\">2vw<\/span> <span class=\"err\">+<\/span> <span class=\"m\">1.2<\/span><span class=\"p\">,<\/span> <span class=\"m\">1.75<\/span><span class=\"p\">);<\/span>\n  <span class=\"p\">}<\/span>\n\n  <span class=\"c\">\/* Links *\/<\/span>\n  <span class=\"nt\">a<\/span> <span class=\"p\">{<\/span>\n    <span class=\"nl\">color<\/span><span class=\"p\">:<\/span> <span class=\"n\">var<\/span><span class=\"p\">(<\/span><span class=\"n\">--color-primary<\/span><span class=\"p\">);<\/span>\n    <span class=\"err\">@apply<\/span> <span class=\"py\">hover<\/span><span class=\"p\">:<\/span><span class=\"nb\">underline<\/span><span class=\"p\">;<\/span>\n  <span class=\"p\">}<\/span>\n\n  <span class=\"c\">\/* T\u00edtulos - Usando vari\u00e1veis CSS para tamanhos consistentes *\/<\/span>\n  <span class=\"nt\">h1<\/span><span class=\"o\">,<\/span>\n  <span class=\"nt\">h2<\/span><span class=\"o\">,<\/span>\n  <span class=\"nt\">h3<\/span><span class=\"o\">,<\/span>\n  <span class=\"nt\">h4<\/span><span class=\"o\">,<\/span>\n  <span class=\"nt\">h5<\/span><span class=\"o\">,<\/span>\n  <span class=\"nt\">h6<\/span> <span class=\"p\">{<\/span>\n    <span class=\"nl\">margin-top<\/span><span class=\"p\">:<\/span> <span class=\"n\">var<\/span><span class=\"p\">(<\/span><span class=\"n\">--spacing-lg<\/span><span class=\"p\">);<\/span>\n    <span class=\"nl\">margin-bottom<\/span><span class=\"p\">:<\/span> <span class=\"n\">var<\/span><span class=\"p\">(<\/span><span class=\"n\">--spacing-base<\/span><span class=\"p\">);<\/span>\n    <span class=\"err\">@apply<\/span> <span class=\"err\">font-bold<\/span> <span class=\"err\">leading-tight;<\/span>\n  <span class=\"p\">}<\/span>\n\n  <span class=\"c\">\/* Sistema de escala tipogr\u00e1fica responsiva *\/<\/span>\n  <span class=\"c\">\/* h1 {\n    @apply text-3xl sm:text-4xl md:text-5xl;\n  }\n  h2 {\n    @apply text-2xl sm:text-3xl md:text-4xl;\n  }\n  h3 {\n    @apply text-xl sm:text-2xl md:text-3xl;\n  }\n  h4 {\n    @apply text-lg sm:text-xl md:text-2xl;\n  }\n  h5 {\n    @apply text-base sm:text-lg md:text-xl;\n  }\n  h6 {\n    @apply text-sm sm:text-base md:text-lg;\n  } *\/<\/span>\n\n  <span class=\"c\">\/* Sistema de escala tipogr\u00e1fica fluida usando clamp() *\/<\/span>\n  <span class=\"nt\">h1<\/span> <span class=\"p\">{<\/span>\n    <span class=\"nl\">font-size<\/span><span class=\"p\">:<\/span> <span class=\"n\">clamp<\/span><span class=\"p\">(<\/span><span class=\"m\">2rem<\/span><span class=\"p\">,<\/span> <span class=\"m\">5vw<\/span> <span class=\"err\">+<\/span> <span class=\"m\">1rem<\/span><span class=\"p\">,<\/span> <span class=\"m\">3.5rem<\/span><span class=\"p\">);<\/span>\n  <span class=\"p\">}<\/span>\n\n  <span class=\"nt\">h2<\/span> <span class=\"p\">{<\/span>\n    <span class=\"nl\">font-size<\/span><span class=\"p\">:<\/span> <span class=\"n\">clamp<\/span><span class=\"p\">(<\/span><span class=\"m\">1.75rem<\/span><span class=\"p\">,<\/span> <span class=\"m\">4vw<\/span> <span class=\"err\">+<\/span> <span class=\"m\">0.75rem<\/span><span class=\"p\">,<\/span> <span class=\"m\">3rem<\/span><span class=\"p\">);<\/span>\n  <span class=\"p\">}<\/span>\n\n  <span class=\"nt\">h3<\/span> <span class=\"p\">{<\/span>\n    <span class=\"nl\">font-size<\/span><span class=\"p\">:<\/span> <span class=\"n\">clamp<\/span><span class=\"p\">(<\/span><span class=\"m\">1.5rem<\/span><span class=\"p\">,<\/span> <span class=\"m\">3vw<\/span> <span class=\"err\">+<\/span> <span class=\"m\">0.75rem<\/span><span class=\"p\">,<\/span> <span class=\"m\">2.5rem<\/span><span class=\"p\">);<\/span>\n  <span class=\"p\">}<\/span>\n\n  <span class=\"nt\">h4<\/span> <span class=\"p\">{<\/span>\n    <span class=\"nl\">font-size<\/span><span class=\"p\">:<\/span> <span class=\"n\">clamp<\/span><span class=\"p\">(<\/span><span class=\"m\">1.25rem<\/span><span class=\"p\">,<\/span> <span class=\"m\">2vw<\/span> <span class=\"err\">+<\/span> <span class=\"m\">0.75rem<\/span><span class=\"p\">,<\/span> <span class=\"m\">2rem<\/span><span class=\"p\">);<\/span>\n  <span class=\"p\">}<\/span>\n\n  <span class=\"nt\">h5<\/span> <span class=\"p\">{<\/span>\n    <span class=\"nl\">font-size<\/span><span class=\"p\">:<\/span> <span class=\"n\">clamp<\/span><span class=\"p\">(<\/span><span class=\"m\">1.1rem<\/span><span class=\"p\">,<\/span> <span class=\"m\">1.5vw<\/span> <span class=\"err\">+<\/span> <span class=\"m\">0.75rem<\/span><span class=\"p\">,<\/span> <span class=\"m\">1.5rem<\/span><span class=\"p\">);<\/span>\n  <span class=\"p\">}<\/span>\n\n  <span class=\"nt\">h6<\/span> <span class=\"p\">{<\/span>\n    <span class=\"nl\">font-size<\/span><span class=\"p\">:<\/span> <span class=\"n\">clamp<\/span><span class=\"p\">(<\/span><span class=\"m\">1rem<\/span><span class=\"p\">,<\/span> <span class=\"m\">1vw<\/span> <span class=\"err\">+<\/span> <span class=\"m\">0.75rem<\/span><span class=\"p\">,<\/span> <span class=\"m\">1.25rem<\/span><span class=\"p\">);<\/span>\n  <span class=\"p\">}<\/span>\n\n  <span class=\"c\">\/* Elementos de texto *\/<\/span>\n  <span class=\"c\">\/* p {\n    margin-bottom: var(--spacing-base);\n    @apply text-lg leading-relaxed;\n  } *\/<\/span>\n\n  <span class=\"c\">\/* Par\u00e1grafos com tipografia fluida *\/<\/span>\n  <span class=\"nt\">p<\/span> <span class=\"p\">{<\/span>\n    <span class=\"nl\">margin-bottom<\/span><span class=\"p\">:<\/span> <span class=\"n\">var<\/span><span class=\"p\">(<\/span><span class=\"n\">--spacing-base<\/span><span class=\"p\">);<\/span>\n    <span class=\"nl\">font-size<\/span><span class=\"p\">:<\/span> <span class=\"n\">clamp<\/span><span class=\"p\">(<\/span><span class=\"m\">1rem<\/span><span class=\"p\">,<\/span> <span class=\"m\">1.5vw<\/span> <span class=\"err\">+<\/span> <span class=\"m\">0.75rem<\/span><span class=\"p\">,<\/span> <span class=\"m\">1.25rem<\/span><span class=\"p\">);<\/span>\n    <span class=\"nl\">line-height<\/span><span class=\"p\">:<\/span> <span class=\"n\">clamp<\/span><span class=\"p\">(<\/span><span class=\"m\">1.6<\/span><span class=\"p\">,<\/span> <span class=\"m\">2vw<\/span> <span class=\"err\">+<\/span> <span class=\"m\">1.2<\/span><span class=\"p\">,<\/span> <span class=\"m\">1.8<\/span><span class=\"p\">);<\/span>\n  <span class=\"p\">}<\/span>\n\n  <span class=\"c\">\/* Listas *\/<\/span>\n  <span class=\"nt\">ul<\/span><span class=\"o\">,<\/span>\n  <span class=\"nt\">ol<\/span> <span class=\"p\">{<\/span>\n    <span class=\"nl\">margin-bottom<\/span><span class=\"p\">:<\/span> <span class=\"n\">var<\/span><span class=\"p\">(<\/span><span class=\"n\">--spacing-base<\/span><span class=\"p\">);<\/span>\n    <span class=\"nl\">padding-left<\/span><span class=\"p\">:<\/span> <span class=\"n\">var<\/span><span class=\"p\">(<\/span><span class=\"n\">--spacing-lg<\/span><span class=\"p\">);<\/span>\n  <span class=\"p\">}<\/span>\n  <span class=\"nt\">ul<\/span> <span class=\"p\">{<\/span>\n    <span class=\"err\">@apply<\/span> <span class=\"err\">list-disc;<\/span>\n  <span class=\"p\">}<\/span>\n  <span class=\"nt\">ol<\/span> <span class=\"p\">{<\/span>\n    <span class=\"err\">@apply<\/span> <span class=\"err\">list-decimal;<\/span>\n  <span class=\"p\">}<\/span>\n  <span class=\"c\">\/* li {\n    margin-bottom: calc(var(--spacing-base) * 0.5);\n  } *\/<\/span>\n  <span class=\"c\">\/* Elementos de lista com tipografia fluida *\/<\/span>\n  <span class=\"nt\">li<\/span> <span class=\"p\">{<\/span>\n    <span class=\"nl\">margin-bottom<\/span><span class=\"p\">:<\/span> <span class=\"n\">calc<\/span><span class=\"p\">(<\/span><span class=\"n\">var<\/span><span class=\"p\">(<\/span><span class=\"n\">--spacing-base<\/span><span class=\"p\">)<\/span> <span class=\"err\">*<\/span> <span class=\"m\">0.5<\/span><span class=\"p\">);<\/span>\n    <span class=\"nl\">font-size<\/span><span class=\"p\">:<\/span> <span class=\"n\">clamp<\/span><span class=\"p\">(<\/span><span class=\"m\">1rem<\/span><span class=\"p\">,<\/span> <span class=\"m\">1.5vw<\/span> <span class=\"err\">+<\/span> <span class=\"m\">0.75rem<\/span><span class=\"p\">,<\/span> <span class=\"m\">1.25rem<\/span><span class=\"p\">);<\/span>\n  <span class=\"p\">}<\/span>\n\n\n  <span class=\"c\">\/* Imagens responsivas *\/<\/span>\n  <span class=\"nt\">img<\/span> <span class=\"p\">{<\/span>\n    <span class=\"err\">@apply<\/span> <span class=\"err\">h-auto<\/span> <span class=\"err\">w-full;<\/span>\n    <span class=\"nl\">border-radius<\/span><span class=\"p\">:<\/span> <span class=\"n\">var<\/span><span class=\"p\">(<\/span><span class=\"n\">--radius-lg<\/span><span class=\"p\">);<\/span>\n    <span class=\"nl\">margin<\/span><span class=\"p\">:<\/span> <span class=\"n\">var<\/span><span class=\"p\">(<\/span><span class=\"n\">--spacing-base<\/span><span class=\"p\">)<\/span> <span class=\"m\">0<\/span><span class=\"p\">;<\/span>\n  <span class=\"p\">}<\/span>\n\n  <span class=\"c\">\/* Cita\u00e7\u00f5es *\/<\/span>\n  <span class=\"c\">\/* blockquote {\n    border-left: 4px solid var(--color-border);\n    color: var(--color-text-muted);\n    padding-left: var(--spacing-base);\n    @apply my-4 italic;\n  } *\/<\/span>\n\n  <span class=\"c\">\/* C\u00f3digo inline e blocos de c\u00f3digo *\/<\/span>\n  <span class=\"c\">\/* code {\n    background-color: var(--color-code-bg);\n    color: var(--color-code-text);\n    border-radius: var(--radius-base);\n    @apply px-1 py-0.5 text-sm;\n  } *\/<\/span>\n\n  <span class=\"c\">\/* pre {\n    background-color: var(--color-code-bg);\n    border-radius: var(--radius-lg);\n    padding: var(--spacing-base);\n    @apply overflow-x-auto text-sm;\n  } *\/<\/span>\n\n  <span class=\"c\">\/* Cita\u00e7\u00f5es com tipografia fluida *\/<\/span>\n  <span class=\"nt\">blockquote<\/span> <span class=\"p\">{<\/span>\n    <span class=\"nl\">border-left<\/span><span class=\"p\">:<\/span> <span class=\"m\">4px<\/span> <span class=\"nb\">solid<\/span> <span class=\"n\">var<\/span><span class=\"p\">(<\/span><span class=\"n\">--color-border<\/span><span class=\"p\">);<\/span>\n    <span class=\"nl\">color<\/span><span class=\"p\">:<\/span> <span class=\"n\">var<\/span><span class=\"p\">(<\/span><span class=\"n\">--color-text-muted<\/span><span class=\"p\">);<\/span>\n    <span class=\"nl\">padding-left<\/span><span class=\"p\">:<\/span> <span class=\"n\">var<\/span><span class=\"p\">(<\/span><span class=\"n\">--spacing-base<\/span><span class=\"p\">);<\/span>\n    <span class=\"err\">@apply<\/span> <span class=\"err\">my-4<\/span> <span class=\"err\">italic;<\/span>\n    <span class=\"nl\">font-size<\/span><span class=\"p\">:<\/span> <span class=\"n\">clamp<\/span><span class=\"p\">(<\/span><span class=\"m\">1rem<\/span><span class=\"p\">,<\/span> <span class=\"m\">1.5vw<\/span> <span class=\"err\">+<\/span> <span class=\"m\">0.75rem<\/span><span class=\"p\">,<\/span> <span class=\"m\">1.25rem<\/span><span class=\"p\">);<\/span>\n  <span class=\"p\">}<\/span>\n\n  <span class=\"c\">\/* C\u00f3digo inline com tipografia fluida *\/<\/span>\n  <span class=\"nt\">code<\/span> <span class=\"p\">{<\/span>\n    <span class=\"nl\">background-color<\/span><span class=\"p\">:<\/span> <span class=\"n\">var<\/span><span class=\"p\">(<\/span><span class=\"n\">--color-code-bg<\/span><span class=\"p\">);<\/span>\n    <span class=\"nl\">color<\/span><span class=\"p\">:<\/span> <span class=\"n\">var<\/span><span class=\"p\">(<\/span><span class=\"n\">--color-code-text<\/span><span class=\"p\">);<\/span>\n    <span class=\"nl\">border-radius<\/span><span class=\"p\">:<\/span> <span class=\"n\">var<\/span><span class=\"p\">(<\/span><span class=\"n\">--radius-base<\/span><span class=\"p\">);<\/span>\n    <span class=\"err\">@apply<\/span> <span class=\"err\">px-1<\/span> <span class=\"err\">py-0.5;<\/span>\n    <span class=\"nl\">font-size<\/span><span class=\"p\">:<\/span> <span class=\"n\">clamp<\/span><span class=\"p\">(<\/span><span class=\"m\">0.875rem<\/span><span class=\"p\">,<\/span> <span class=\"m\">1vw<\/span> <span class=\"err\">+<\/span> <span class=\"m\">0.5rem<\/span><span class=\"p\">,<\/span> <span class=\"m\">1rem<\/span><span class=\"p\">);<\/span>\n  <span class=\"p\">}<\/span>\n\n  <span class=\"c\">\/* Blocos de c\u00f3digo com tipografia fluida *\/<\/span>\n  <span class=\"nt\">pre<\/span> <span class=\"p\">{<\/span>\n    <span class=\"nl\">background-color<\/span><span class=\"p\">:<\/span> <span class=\"n\">var<\/span><span class=\"p\">(<\/span><span class=\"n\">--color-code-bg<\/span><span class=\"p\">);<\/span>\n    <span class=\"nl\">border-radius<\/span><span class=\"p\">:<\/span> <span class=\"n\">var<\/span><span class=\"p\">(<\/span><span class=\"n\">--radius-lg<\/span><span class=\"p\">);<\/span>\n    <span class=\"nl\">padding<\/span><span class=\"p\">:<\/span> <span class=\"n\">var<\/span><span class=\"p\">(<\/span><span class=\"n\">--spacing-base<\/span><span class=\"p\">);<\/span>\n    <span class=\"err\">@apply<\/span> <span class=\"err\">overflow-x-auto;<\/span>\n    <span class=\"nl\">font-size<\/span><span class=\"p\">:<\/span> <span class=\"n\">clamp<\/span><span class=\"p\">(<\/span><span class=\"m\">0.875rem<\/span><span class=\"p\">,<\/span> <span class=\"m\">1vw<\/span> <span class=\"err\">+<\/span> <span class=\"m\">0.5rem<\/span><span class=\"p\">,<\/span> <span class=\"m\">1rem<\/span><span class=\"p\">);<\/span>\n  <span class=\"p\">}<\/span>\n\n  <span class=\"c\">\/* Tabelas *\/<\/span>\n  <span class=\"nt\">table<\/span> <span class=\"p\">{<\/span>\n    <span class=\"err\">@apply<\/span> <span class=\"err\">my-4<\/span> <span class=\"err\">w-full<\/span> <span class=\"err\">border-collapse;<\/span>\n  <span class=\"p\">}<\/span>\n\n  <span class=\"c\">\/* th,\n  td {\n    border-bottom: 1px solid var(--color-border);\n    padding: calc(var(--spacing-base) * 0.5) var(--spacing-base);\n    @apply text-left;\n  } *\/<\/span>\n\n  <span class=\"c\">\/* C\u00e9lulas de tabela com tipografia fluida *\/<\/span>\n  <span class=\"nt\">th<\/span><span class=\"o\">,<\/span> <span class=\"nt\">td<\/span> <span class=\"p\">{<\/span>\n    <span class=\"nl\">border-bottom<\/span><span class=\"p\">:<\/span> <span class=\"m\">1px<\/span> <span class=\"nb\">solid<\/span> <span class=\"n\">var<\/span><span class=\"p\">(<\/span><span class=\"n\">--color-border<\/span><span class=\"p\">);<\/span>\n    <span class=\"nl\">padding<\/span><span class=\"p\">:<\/span> <span class=\"n\">calc<\/span><span class=\"p\">(<\/span><span class=\"n\">var<\/span><span class=\"p\">(<\/span><span class=\"n\">--spacing-base<\/span><span class=\"p\">)<\/span> <span class=\"err\">*<\/span> <span class=\"m\">0.5<\/span><span class=\"p\">)<\/span> <span class=\"n\">var<\/span><span class=\"p\">(<\/span><span class=\"n\">--spacing-base<\/span><span class=\"p\">);<\/span>\n    <span class=\"err\">@apply<\/span> <span class=\"err\">text-left;<\/span>\n    <span class=\"nl\">font-size<\/span><span class=\"p\">:<\/span> <span class=\"n\">clamp<\/span><span class=\"p\">(<\/span><span class=\"m\">0.875rem<\/span><span class=\"p\">,<\/span> <span class=\"m\">1vw<\/span> <span class=\"err\">+<\/span> <span class=\"m\">0.5rem<\/span><span class=\"p\">,<\/span> <span class=\"m\">1rem<\/span><span class=\"p\">);<\/span>\n  <span class=\"p\">}<\/span>\n\n  <span class=\"nt\">th<\/span> <span class=\"p\">{<\/span>\n    <span class=\"nl\">background-color<\/span><span class=\"p\">:<\/span> <span class=\"n\">var<\/span><span class=\"p\">(<\/span><span class=\"n\">--color-code-bg<\/span><span class=\"p\">);<\/span>\n    <span class=\"err\">@apply<\/span> <span class=\"err\">font-semibold;<\/span>\n  <span class=\"p\">}<\/span>\n\n  <span class=\"c\">\/* Formul\u00e1rios *\/<\/span>\n  <span class=\"nt\">input<\/span><span class=\"o\">[<\/span><span class=\"nt\">type<\/span><span class=\"o\">=<\/span><span class=\"s1\">\"email\"<\/span><span class=\"o\">],<\/span>\n  <span class=\"nt\">input<\/span><span class=\"o\">[<\/span><span class=\"nt\">type<\/span><span class=\"o\">=<\/span><span class=\"s1\">\"password\"<\/span><span class=\"o\">],<\/span>\n  <span class=\"nt\">input<\/span><span class=\"o\">[<\/span><span class=\"nt\">type<\/span><span class=\"o\">=<\/span><span class=\"s1\">\"search\"<\/span><span class=\"o\">],<\/span>\n  <span class=\"nt\">input<\/span><span class=\"o\">[<\/span><span class=\"nt\">type<\/span><span class=\"o\">=<\/span><span class=\"s1\">\"text\"<\/span><span class=\"o\">],<\/span>\n  <span class=\"nt\">input<\/span><span class=\"o\">[<\/span><span class=\"nt\">type<\/span><span class=\"o\">=<\/span><span class=\"s1\">\"url\"<\/span><span class=\"o\">],<\/span>\n  <span class=\"nt\">input<\/span><span class=\"o\">[<\/span><span class=\"nt\">type<\/span><span class=\"o\">=<\/span><span class=\"s1\">\"number\"<\/span><span class=\"o\">],<\/span>\n  <span class=\"nt\">input<\/span><span class=\"o\">[<\/span><span class=\"nt\">type<\/span><span class=\"o\">=<\/span><span class=\"s1\">\"date\"<\/span><span class=\"o\">],<\/span>\n  <span class=\"nt\">input<\/span><span class=\"o\">[<\/span><span class=\"nt\">type<\/span><span class=\"o\">=<\/span><span class=\"s1\">\"datetime-local\"<\/span><span class=\"o\">],<\/span>\n  <span class=\"nt\">input<\/span><span class=\"o\">[<\/span><span class=\"nt\">type<\/span><span class=\"o\">=<\/span><span class=\"s1\">\"month\"<\/span><span class=\"o\">],<\/span>\n  <span class=\"nt\">input<\/span><span class=\"o\">[<\/span><span class=\"nt\">type<\/span><span class=\"o\">=<\/span><span class=\"s1\">\"week\"<\/span><span class=\"o\">],<\/span>\n  <span class=\"nt\">input<\/span><span class=\"o\">[<\/span><span class=\"nt\">type<\/span><span class=\"o\">=<\/span><span class=\"s1\">\"time\"<\/span><span class=\"o\">],<\/span>\n  <span class=\"nt\">input<\/span><span class=\"o\">[<\/span><span class=\"nt\">type<\/span><span class=\"o\">=<\/span><span class=\"s1\">\"tel\"<\/span><span class=\"o\">],<\/span>\n  <span class=\"nt\">select<\/span><span class=\"o\">[<\/span><span class=\"nt\">multiple<\/span><span class=\"o\">],<\/span>\n  <span class=\"nt\">input<\/span><span class=\"o\">,<\/span>\n  <span class=\"nt\">textarea<\/span><span class=\"o\">,<\/span>\n  <span class=\"nt\">select<\/span><span class=\"o\">,<\/span>\n  <span class=\"nt\">button<\/span> <span class=\"p\">{<\/span>\n    <span class=\"nl\">border-radius<\/span><span class=\"p\">:<\/span> <span class=\"n\">var<\/span><span class=\"p\">(<\/span><span class=\"n\">--radius-base<\/span><span class=\"p\">);<\/span>\n    <span class=\"nl\">margin-bottom<\/span><span class=\"p\">:<\/span> <span class=\"n\">var<\/span><span class=\"p\">(<\/span><span class=\"n\">--spacing-base<\/span><span class=\"p\">);<\/span>\n    <span class=\"nl\">padding<\/span><span class=\"p\">:<\/span> <span class=\"n\">calc<\/span><span class=\"p\">(<\/span><span class=\"n\">var<\/span><span class=\"p\">(<\/span><span class=\"n\">--spacing-base<\/span><span class=\"p\">)<\/span> <span class=\"err\">*<\/span> <span class=\"m\">0.5<\/span><span class=\"p\">)<\/span> <span class=\"n\">var<\/span><span class=\"p\">(<\/span><span class=\"n\">--spacing-base<\/span><span class=\"p\">);<\/span>\n    <span class=\"nl\">width<\/span><span class=\"p\">:<\/span> <span class=\"m\">100%<\/span><span class=\"p\">;<\/span>\n    <span class=\"nl\">border<\/span><span class=\"p\">:<\/span> <span class=\"m\">1px<\/span> <span class=\"nb\">solid<\/span> <span class=\"n\">var<\/span><span class=\"p\">(<\/span><span class=\"n\">--color-border<\/span><span class=\"p\">);<\/span>\n  <span class=\"p\">}<\/span>\n\n  <span class=\"nd\">::file-selector-button<\/span> <span class=\"p\">{<\/span>\n    <span class=\"nl\">border-radius<\/span><span class=\"p\">:<\/span> <span class=\"n\">var<\/span><span class=\"p\">(<\/span><span class=\"n\">--radius-base<\/span><span class=\"p\">);<\/span>\n    <span class=\"nl\">margin-bottom<\/span><span class=\"p\">:<\/span> <span class=\"n\">var<\/span><span class=\"p\">(<\/span><span class=\"n\">--spacing-base<\/span><span class=\"p\">);<\/span>\n    <span class=\"nl\">padding<\/span><span class=\"p\">:<\/span> <span class=\"n\">calc<\/span><span class=\"p\">(<\/span><span class=\"n\">var<\/span><span class=\"p\">(<\/span><span class=\"n\">--spacing-base<\/span><span class=\"p\">)<\/span> <span class=\"err\">*<\/span> <span class=\"m\">0.5<\/span><span class=\"p\">)<\/span> <span class=\"n\">var<\/span><span class=\"p\">(<\/span><span class=\"n\">--spacing-base<\/span><span class=\"p\">);<\/span>\n    <span class=\"nl\">border<\/span><span class=\"p\">:<\/span> <span class=\"m\">1px<\/span> <span class=\"nb\">solid<\/span> <span class=\"n\">var<\/span><span class=\"p\">(<\/span><span class=\"n\">--color-border<\/span><span class=\"p\">);<\/span>\n  <span class=\"p\">}<\/span>\n\n  <span class=\"c\">\/* Campos de formul\u00e1rio *\/<\/span>\n  <span class=\"nt\">input<\/span><span class=\"o\">[<\/span><span class=\"nt\">type<\/span><span class=\"o\">=<\/span><span class=\"s1\">\"email\"<\/span><span class=\"o\">],<\/span>\n  <span class=\"nt\">input<\/span><span class=\"o\">[<\/span><span class=\"nt\">type<\/span><span class=\"o\">=<\/span><span class=\"s1\">\"password\"<\/span><span class=\"o\">],<\/span>\n  <span class=\"nt\">input<\/span><span class=\"o\">[<\/span><span class=\"nt\">type<\/span><span class=\"o\">=<\/span><span class=\"s1\">\"search\"<\/span><span class=\"o\">],<\/span>\n  <span class=\"nt\">input<\/span><span class=\"o\">[<\/span><span class=\"nt\">type<\/span><span class=\"o\">=<\/span><span class=\"s1\">\"text\"<\/span><span class=\"o\">],<\/span>\n  <span class=\"nt\">input<\/span><span class=\"o\">[<\/span><span class=\"nt\">type<\/span><span class=\"o\">=<\/span><span class=\"s1\">\"url\"<\/span><span class=\"o\">],<\/span>\n  <span class=\"nt\">input<\/span><span class=\"o\">[<\/span><span class=\"nt\">type<\/span><span class=\"o\">=<\/span><span class=\"s1\">\"number\"<\/span><span class=\"o\">],<\/span>\n  <span class=\"nt\">input<\/span><span class=\"o\">[<\/span><span class=\"nt\">type<\/span><span class=\"o\">=<\/span><span class=\"s1\">\"date\"<\/span><span class=\"o\">],<\/span>\n  <span class=\"nt\">input<\/span><span class=\"o\">[<\/span><span class=\"nt\">type<\/span><span class=\"o\">=<\/span><span class=\"s1\">\"datetime-local\"<\/span><span class=\"o\">],<\/span>\n  <span class=\"nt\">input<\/span><span class=\"o\">[<\/span><span class=\"nt\">type<\/span><span class=\"o\">=<\/span><span class=\"s1\">\"month\"<\/span><span class=\"o\">],<\/span>\n  <span class=\"nt\">input<\/span><span class=\"o\">[<\/span><span class=\"nt\">type<\/span><span class=\"o\">=<\/span><span class=\"s1\">\"week\"<\/span><span class=\"o\">],<\/span>\n  <span class=\"nt\">input<\/span><span class=\"o\">[<\/span><span class=\"nt\">type<\/span><span class=\"o\">=<\/span><span class=\"s1\">\"time\"<\/span><span class=\"o\">],<\/span>\n  <span class=\"nt\">input<\/span><span class=\"o\">[<\/span><span class=\"nt\">type<\/span><span class=\"o\">=<\/span><span class=\"s1\">\"tel\"<\/span><span class=\"o\">],<\/span>\n  <span class=\"nt\">select<\/span><span class=\"o\">[<\/span><span class=\"nt\">multiple<\/span><span class=\"o\">],<\/span>\n  <span class=\"nt\">input<\/span><span class=\"o\">,<\/span>\n  <span class=\"nt\">textarea<\/span><span class=\"o\">,<\/span>\n  <span class=\"nt\">select<\/span> <span class=\"p\">{<\/span>\n    <span class=\"nl\">background-color<\/span><span class=\"p\">:<\/span> <span class=\"n\">var<\/span><span class=\"p\">(<\/span><span class=\"n\">--color-input-bg<\/span><span class=\"p\">);<\/span>\n    <span class=\"nl\">color<\/span><span class=\"p\">:<\/span> <span class=\"n\">var<\/span><span class=\"p\">(<\/span><span class=\"n\">--color-text<\/span><span class=\"p\">);<\/span>\n  <span class=\"p\">}<\/span>\n\n  <span class=\"c\">\/* Estados de foco *\/<\/span>\n  <span class=\"nt\">input<\/span><span class=\"o\">[<\/span><span class=\"nt\">type<\/span><span class=\"o\">=<\/span><span class=\"s1\">\"email\"<\/span><span class=\"o\">]<\/span><span class=\"nd\">:focus<\/span><span class=\"o\">,<\/span>\n  <span class=\"nt\">input<\/span><span class=\"o\">[<\/span><span class=\"nt\">type<\/span><span class=\"o\">=<\/span><span class=\"s1\">\"password\"<\/span><span class=\"o\">]<\/span><span class=\"nd\">:focus<\/span><span class=\"o\">,<\/span>\n  <span class=\"nt\">input<\/span><span class=\"o\">[<\/span><span class=\"nt\">type<\/span><span class=\"o\">=<\/span><span class=\"s1\">\"search\"<\/span><span class=\"o\">]<\/span><span class=\"nd\">:focus<\/span><span class=\"o\">,<\/span>\n  <span class=\"nt\">input<\/span><span class=\"o\">[<\/span><span class=\"nt\">type<\/span><span class=\"o\">=<\/span><span class=\"s1\">\"text\"<\/span><span class=\"o\">]<\/span><span class=\"nd\">:focus<\/span><span class=\"o\">,<\/span>\n  <span class=\"nt\">input<\/span><span class=\"o\">[<\/span><span class=\"nt\">type<\/span><span class=\"o\">=<\/span><span class=\"s1\">\"url\"<\/span><span class=\"o\">]<\/span><span class=\"nd\">:focus<\/span><span class=\"o\">,<\/span>\n  <span class=\"nt\">input<\/span><span class=\"o\">[<\/span><span class=\"nt\">type<\/span><span class=\"o\">=<\/span><span class=\"s1\">\"number\"<\/span><span class=\"o\">]<\/span><span class=\"nd\">:focus<\/span><span class=\"o\">,<\/span>\n  <span class=\"nt\">input<\/span><span class=\"o\">[<\/span><span class=\"nt\">type<\/span><span class=\"o\">=<\/span><span class=\"s1\">\"date\"<\/span><span class=\"o\">]<\/span><span class=\"nd\">:focus<\/span><span class=\"o\">,<\/span>\n  <span class=\"nt\">input<\/span><span class=\"o\">[<\/span><span class=\"nt\">type<\/span><span class=\"o\">=<\/span><span class=\"s1\">\"datetime-local\"<\/span><span class=\"o\">]<\/span><span class=\"nd\">:focus<\/span><span class=\"o\">,<\/span>\n  <span class=\"nt\">input<\/span><span class=\"o\">[<\/span><span class=\"nt\">type<\/span><span class=\"o\">=<\/span><span class=\"s1\">\"month\"<\/span><span class=\"o\">]<\/span><span class=\"nd\">:focus<\/span><span class=\"o\">,<\/span>\n  <span class=\"nt\">input<\/span><span class=\"o\">[<\/span><span class=\"nt\">type<\/span><span class=\"o\">=<\/span><span class=\"s1\">\"week\"<\/span><span class=\"o\">]<\/span><span class=\"nd\">:focus<\/span><span class=\"o\">,<\/span>\n  <span class=\"nt\">input<\/span><span class=\"o\">[<\/span><span class=\"nt\">type<\/span><span class=\"o\">=<\/span><span class=\"s1\">\"time\"<\/span><span class=\"o\">]<\/span><span class=\"nd\">:focus<\/span><span class=\"o\">,<\/span>\n  <span class=\"nt\">input<\/span><span class=\"o\">[<\/span><span class=\"nt\">type<\/span><span class=\"o\">=<\/span><span class=\"s1\">\"tel\"<\/span><span class=\"o\">]<\/span><span class=\"nd\">:focus<\/span><span class=\"o\">,<\/span>\n  <span class=\"nt\">select<\/span><span class=\"o\">[<\/span><span class=\"nt\">multiple<\/span><span class=\"o\">]<\/span><span class=\"nd\">:focus<\/span><span class=\"o\">,<\/span>\n  <span class=\"nt\">input<\/span><span class=\"nd\">:focus<\/span><span class=\"o\">,<\/span>\n  <span class=\"nt\">textarea<\/span><span class=\"nd\">:focus<\/span><span class=\"o\">,<\/span>\n  <span class=\"nt\">select<\/span><span class=\"nd\">:focus<\/span> <span class=\"p\">{<\/span>\n    <span class=\"err\">@apply<\/span> <span class=\"err\">outline-none<\/span> <span class=\"err\">ring-2<\/span> <span class=\"err\">ring-blue-500<\/span> <span class=\"py\">focus<\/span><span class=\"p\">:<\/span><span class=\"n\">ring-offset-2<\/span><span class=\"p\">;<\/span>\n  <span class=\"p\">}<\/span>\n\n  <span class=\"c\">\/* Bot\u00f5es *\/<\/span>\n  <span class=\"nt\">button<\/span><span class=\"o\">,<\/span>\n  <span class=\"nt\">input<\/span><span class=\"o\">[<\/span><span class=\"nt\">type<\/span><span class=\"o\">=<\/span><span class=\"s1\">\"button\"<\/span><span class=\"o\">],<\/span>\n  <span class=\"nt\">input<\/span><span class=\"o\">[<\/span><span class=\"nt\">type<\/span><span class=\"o\">=<\/span><span class=\"s1\">\"submit\"<\/span><span class=\"o\">],<\/span>\n  <span class=\"nt\">input<\/span><span class=\"o\">[<\/span><span class=\"nt\">type<\/span><span class=\"o\">=<\/span><span class=\"s1\">\"reset\"<\/span><span class=\"o\">],<\/span>\n  <span class=\"nd\">::file-selector-button<\/span> <span class=\"p\">{<\/span>\n    <span class=\"nl\">background-color<\/span><span class=\"p\">:<\/span> <span class=\"n\">var<\/span><span class=\"p\">(<\/span><span class=\"n\">--color-primary<\/span><span class=\"p\">);<\/span>\n    <span class=\"nl\">color<\/span><span class=\"p\">:<\/span> <span class=\"no\">white<\/span><span class=\"p\">;<\/span>\n    <span class=\"err\">@apply<\/span> <span class=\"err\">cursor-pointer<\/span> <span class=\"py\">hover<\/span><span class=\"p\">:<\/span><span class=\"n\">bg-blue-700<\/span><span class=\"p\">;<\/span>\n  <span class=\"p\">}<\/span>\n<span class=\"p\">}<\/span>\n\n<span class=\"c\">\/* =================================================================\n     COMPONENTES\n     Classes reutiliz\u00e1veis para padr\u00f5es comuns de design\n     ================================================================= *\/<\/span>\n<span class=\"k\">@layer<\/span> <span class=\"n\">components<\/span> <span class=\"p\">{<\/span>\n  <span class=\"nc\">.container-page<\/span> <span class=\"p\">{<\/span>\n    <span class=\"nl\">margin<\/span><span class=\"p\">:<\/span> <span class=\"m\">0<\/span> <span class=\"nb\">auto<\/span><span class=\"p\">;<\/span>\n    <span class=\"nl\">max-width<\/span><span class=\"p\">:<\/span> <span class=\"n\">var<\/span><span class=\"p\">(<\/span><span class=\"n\">--max-width-content<\/span><span class=\"p\">);<\/span>\n    <span class=\"nl\">padding<\/span><span class=\"p\">:<\/span> <span class=\"m\">0<\/span> <span class=\"n\">var<\/span><span class=\"p\">(<\/span><span class=\"n\">--spacing-base<\/span><span class=\"p\">);<\/span>\n    <span class=\"err\">@apply<\/span> <span class=\"py\">sm<\/span><span class=\"p\">:<\/span><span class=\"n\">px-6<\/span> <span class=\"n\">md<\/span><span class=\"p\">:<\/span><span class=\"n\">px-8<\/span> <span class=\"n\">lg<\/span><span class=\"p\">:<\/span><span class=\"n\">px-12<\/span><span class=\"p\">;<\/span>\n  <span class=\"p\">}<\/span>\n\n  <span class=\"nc\">.table-striped<\/span> <span class=\"nt\">tbody<\/span> <span class=\"nt\">tr<\/span><span class=\"nd\">:nth-of-type<\/span><span class=\"o\">(<\/span><span class=\"nt\">odd<\/span><span class=\"o\">)<\/span> <span class=\"p\">{<\/span>\n    <span class=\"nl\">background-color<\/span><span class=\"p\">:<\/span> <span class=\"n\">var<\/span><span class=\"p\">(<\/span><span class=\"n\">--color-input-bg<\/span><span class=\"p\">);<\/span>\n  <span class=\"p\">}<\/span>\n\n  <span class=\"nc\">.code-block<\/span> <span class=\"p\">{<\/span>\n    <span class=\"nl\">background-color<\/span><span class=\"p\">:<\/span> <span class=\"n\">var<\/span><span class=\"p\">(<\/span><span class=\"n\">--color-code-bg<\/span><span class=\"p\">);<\/span>\n    <span class=\"nl\">border-radius<\/span><span class=\"p\">:<\/span> <span class=\"n\">var<\/span><span class=\"p\">(<\/span><span class=\"n\">--radius-lg<\/span><span class=\"p\">);<\/span>\n    <span class=\"nl\">padding<\/span><span class=\"p\">:<\/span> <span class=\"n\">var<\/span><span class=\"p\">(<\/span><span class=\"n\">--spacing-base<\/span><span class=\"p\">);<\/span>\n    <span class=\"err\">@apply<\/span> <span class=\"err\">overflow-x-auto<\/span> <span class=\"err\">text-sm;<\/span>\n  <span class=\"p\">}<\/span>\n<span class=\"p\">}<\/span>\n\n<span class=\"c\">\/* =================================================================\n     UTILIT\u00c1RIOS\n     Classes utilit\u00e1rias personalizadas\n     ================================================================= *\/<\/span>\n<span class=\"k\">@layer<\/span> <span class=\"n\">utilities<\/span> <span class=\"p\">{<\/span>\n  <span class=\"nc\">.text-primary<\/span> <span class=\"p\">{<\/span>\n    <span class=\"nl\">color<\/span><span class=\"p\">:<\/span> <span class=\"n\">var<\/span><span class=\"p\">(<\/span><span class=\"n\">--color-primary<\/span><span class=\"p\">);<\/span>\n  <span class=\"p\">}<\/span>\n\n  <span class=\"nc\">.bg-primary<\/span> <span class=\"p\">{<\/span>\n    <span class=\"nl\">background-color<\/span><span class=\"p\">:<\/span> <span class=\"n\">var<\/span><span class=\"p\">(<\/span><span class=\"n\">--color-primary<\/span><span class=\"p\">);<\/span>\n  <span class=\"p\">}<\/span>\n<span class=\"p\">}<\/span>\n\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/details>\n<h3><span class=\"ez-toc-section\" id=\"%D9%85%D8%AD%D8%AA%D9%88%DB%8C%D8%A7%D8%AA_%D8%B3%D9%88%D9%85%DB%8C%D9%86_%D9%81%D8%A7%DB%8C%D9%84_%D8%B3%D9%81%D8%A7%D8%B1%D8%B4%DB%8C_Tailwind_%D8%B1%D8%A7_%D8%AF%D8%B1_%D8%A2%D9%86_%D9%82%D8%B1%D8%A7%D8%B1_%D8%AF%D9%87%DB%8C%D8%AF_custom3css\"><\/span>\n<p>  \u0645\u062d\u062a\u0648\u06cc\u0627\u062a \u0633\u0648\u0645\u06cc\u0646 \u0641\u0627\u06cc\u0644 \u0633\u0641\u0627\u0631\u0634\u06cc Tailwind \u0631\u0627 \u062f\u0631 \u0622\u0646 \u0642\u0631\u0627\u0631 \u062f\u0647\u06cc\u062f <code>custom3.css<\/code><br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<details>\n<summary>\u0646\u0645\u0627\u06cc\u0634 \u0628\u06cc\u0634\u062a\u0631\u2026<\/summary>\n<p>\u0641\u0627\u06cc\u0644 \u0631\u0627 \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f <code>app\/assets\/stylesheets\/custom_tailwind\/custom3.css<\/code> \u0648 \u0645\u0637\u0627\u0644\u0628 \u0632\u06cc\u0631 \u0631\u0627 \u06a9\u067e\u06cc \u06a9\u0646\u06cc\u062f<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight css\"><code><span class=\"k\">@tailwind<\/span> <span class=\"n\">base<\/span><span class=\"p\">;<\/span>\n<span class=\"k\">@tailwind<\/span> <span class=\"n\">components<\/span><span class=\"p\">;<\/span>\n<span class=\"k\">@tailwind<\/span> <span class=\"n\">utilities<\/span><span class=\"p\">;<\/span>\n\n<span class=\"k\">@layer<\/span> <span class=\"n\">base<\/span> <span class=\"p\">{<\/span>\n  <span class=\"nt\">body<\/span> <span class=\"p\">{<\/span>\n    <span class=\"err\">@apply<\/span> <span class=\"err\">min-h-screen<\/span> <span class=\"err\">bg-gradient-to-t<\/span> <span class=\"err\">from-slate-50<\/span> <span class=\"err\">to-slate-200<\/span> <span class=\"err\">text-slate-950;<\/span>\n  <span class=\"p\">}<\/span>\n\n  <span class=\"nt\">h1<\/span> <span class=\"p\">{<\/span>\n    <span class=\"err\">@apply<\/span> <span class=\"err\">px-4<\/span> <span class=\"err\">py-8<\/span> <span class=\"err\">text-2xl;<\/span>\n  <span class=\"p\">}<\/span>\n\n  <span class=\"nt\">h2<\/span> <span class=\"p\">{<\/span>\n    <span class=\"err\">@apply<\/span> <span class=\"err\">px-4<\/span> <span class=\"err\">py-4<\/span> <span class=\"err\">text-xl;<\/span>\n  <span class=\"p\">}<\/span>\n\n  <span class=\"nt\">h3<\/span> <span class=\"p\">{<\/span>\n    <span class=\"err\">@apply<\/span> <span class=\"err\">px-4<\/span> <span class=\"err\">pb-1<\/span> <span class=\"err\">pt-2<\/span> <span class=\"err\">text-xl;<\/span>\n  <span class=\"p\">}<\/span>\n\n  <span class=\"nt\">h4<\/span><span class=\"o\">,<\/span>\n  <span class=\"nt\">h5<\/span><span class=\"o\">,<\/span>\n  <span class=\"nt\">h6<\/span> <span class=\"p\">{<\/span>\n    <span class=\"err\">@apply<\/span> <span class=\"err\">px-4<\/span> <span class=\"err\">pb-0<\/span> <span class=\"err\">pt-1<\/span> <span class=\"err\">text-lg;<\/span>\n  <span class=\"p\">}<\/span>\n\n  <span class=\"nt\">a<\/span> <span class=\"p\">{<\/span>\n    <span class=\"err\">@apply<\/span> <span class=\"err\">underline<\/span> <span class=\"err\">decoration-sky-800<\/span> <span class=\"err\">underline-offset-2;<\/span>\n  <span class=\"p\">}<\/span>\n\n  <span class=\"nt\">a<\/span><span class=\"nd\">:hover<\/span> <span class=\"p\">{<\/span>\n    <span class=\"err\">@apply<\/span> <span class=\"err\">decoration-2;<\/span>\n  <span class=\"p\">}<\/span>\n\n  <span class=\"nt\">header<\/span><span class=\"o\">,<\/span>\n  <span class=\"nt\">main<\/span><span class=\"o\">,<\/span>\n  <span class=\"nt\">footer<\/span> <span class=\"p\">{<\/span>\n    <span class=\"err\">@apply<\/span> <span class=\"err\">container<\/span> <span class=\"err\">max-w-3xl;<\/span>\n  <span class=\"p\">}<\/span>\n\n  <span class=\"nt\">header<\/span> <span class=\"p\">{<\/span>\n    <span class=\"err\">@apply<\/span> <span class=\"err\">mt-4<\/span> <span class=\"err\">rounded-t-lg<\/span> <span class=\"err\">border<\/span> <span class=\"err\">border-slate-300<\/span> <span class=\"err\">bg-slate-50;<\/span>\n\n    <span class=\"err\">h1<\/span> <span class=\"err\">{<\/span>\n      <span class=\"err\">@apply<\/span> <span class=\"err\">pb-1<\/span> <span class=\"err\">text-slate-900;<\/span>\n    <span class=\"p\">}<\/span>\n\n    <span class=\"nt\">h2<\/span> <span class=\"p\">{<\/span>\n      <span class=\"err\">@apply<\/span> <span class=\"err\">font-normal<\/span> <span class=\"err\">text-slate-700;<\/span>\n    <span class=\"p\">}<\/span>\n\n    <span class=\"nt\">p<\/span> <span class=\"p\">{<\/span>\n      <span class=\"err\">@apply<\/span> <span class=\"err\">px-4<\/span> <span class=\"err\">py-4<\/span> <span class=\"err\">pt-0<\/span> <span class=\"err\">text-base<\/span> <span class=\"err\">font-normal<\/span> <span class=\"err\">text-slate-500;<\/span>\n    <span class=\"p\">}<\/span>\n  <span class=\"p\">}<\/span>\n\n  <span class=\"nt\">main<\/span> <span class=\"p\">{<\/span>\n    <span class=\"err\">@apply<\/span> <span class=\"err\">border-l<\/span> <span class=\"err\">border-r<\/span> <span class=\"err\">border-slate-300<\/span> <span class=\"err\">bg-white;<\/span>\n\n    <span class=\"err\">article<\/span> <span class=\"err\">{<\/span>\n      <span class=\"err\">@apply<\/span> <span class=\"err\">py-2;<\/span>\n\n      <span class=\"err\">p<\/span> <span class=\"err\">{<\/span>\n        <span class=\"err\">@apply<\/span> <span class=\"err\">p-4<\/span> <span class=\"err\">px-4<\/span> <span class=\"err\">text-justify<\/span> <span class=\"err\">text-base<\/span> <span class=\"err\">leading-normal;<\/span>\n\n        <span class=\"err\">img<\/span> <span class=\"err\">{<\/span>\n          <span class=\"err\">@apply<\/span> <span class=\"err\">float-start<\/span> <span class=\"err\">m-3<\/span> <span class=\"err\">rounded<\/span> <span class=\"err\">border<\/span> <span class=\"err\">border-gray-300<\/span> <span class=\"err\">p-1;<\/span>\n        <span class=\"p\">}<\/span>\n      <span class=\"err\">}<\/span>\n\n      <span class=\"nt\">blockquote<\/span> <span class=\"p\">{<\/span>\n        <span class=\"err\">@apply<\/span> <span class=\"err\">mx-4<\/span> <span class=\"err\">p-4<\/span> <span class=\"err\">px-4<\/span> <span class=\"err\">text-justify<\/span> <span class=\"err\">text-base<\/span> <span class=\"err\">leading-normal<\/span> <span class=\"err\">text-slate-500;<\/span>\n        <span class=\"err\">@apply<\/span> <span class=\"err\">border-l-4<\/span> <span class=\"err\">border-l-slate-500;<\/span>\n      <span class=\"p\">}<\/span>\n\n      <span class=\"nt\">ul<\/span> <span class=\"p\">{<\/span>\n        <span class=\"err\">@apply<\/span> <span class=\"err\">m-4<\/span> <span class=\"err\">rounded<\/span> <span class=\"err\">border<\/span> <span class=\"err\">border-gray-100;<\/span>\n        <span class=\"err\">@apply<\/span> <span class=\"err\">divide-y<\/span> <span class=\"err\">divide-gray-200;<\/span>\n\n        <span class=\"err\">li<\/span> <span class=\"err\">{<\/span>\n          <span class=\"err\">@apply<\/span> <span class=\"err\">p-4;<\/span>\n\n          <span class=\"err\">p<\/span> <span class=\"err\">{<\/span>\n            <span class=\"err\">@apply<\/span> <span class=\"err\">my-0;<\/span>\n          <span class=\"p\">}<\/span>\n        <span class=\"err\">}<\/span>\n      <span class=\"err\">}<\/span>\n\n      <span class=\"nt\">span<\/span> <span class=\"p\">{<\/span>\n        <span class=\"err\">@apply<\/span> <span class=\"err\">text-base<\/span> <span class=\"err\">leading-normal;<\/span>\n      <span class=\"p\">}<\/span>\n\n      <span class=\"nt\">button<\/span><span class=\"o\">[<\/span><span class=\"nt\">type<\/span><span class=\"o\">=<\/span><span class=\"s1\">\"button\"<\/span><span class=\"o\">]<\/span> <span class=\"p\">{<\/span>\n        <span class=\"err\">@apply<\/span> <span class=\"err\">my-2<\/span> <span class=\"err\">ml-4<\/span> <span class=\"err\">rounded<\/span> <span class=\"err\">bg-amber-200<\/span> <span class=\"err\">px-2<\/span> <span class=\"err\">py-1;<\/span>\n\n        <span class=\"err\">&amp;:hover<\/span> <span class=\"err\">{<\/span>\n          <span class=\"err\">@apply<\/span> <span class=\"err\">transition<\/span> <span class=\"py\">hover<\/span><span class=\"p\">:<\/span><span class=\"n\">bg-amber-500<\/span><span class=\"p\">;<\/span>\n        <span class=\"p\">}<\/span>\n      <span class=\"err\">}<\/span>\n    <span class=\"err\">}<\/span>\n\n    <span class=\"nt\">form<\/span> <span class=\"p\">{<\/span>\n      <span class=\"err\">@apply<\/span> <span class=\"err\">p-4;<\/span>\n\n      <span class=\"err\">fieldset<\/span> <span class=\"err\">{<\/span>\n        <span class=\"err\">@apply<\/span> <span class=\"err\">rounded<\/span> <span class=\"err\">border<\/span> <span class=\"err\">border-gray-300<\/span> <span class=\"err\">p-4;<\/span>\n      <span class=\"p\">}<\/span>\n\n      <span class=\"nt\">input<\/span><span class=\"o\">,<\/span>\n      <span class=\"nt\">textarea<\/span><span class=\"o\">,<\/span>\n      <span class=\"nt\">select<\/span><span class=\"o\">,<\/span>\n      <span class=\"nt\">button<\/span> <span class=\"p\">{<\/span>\n        <span class=\"err\">@apply<\/span> <span class=\"err\">my-2<\/span> <span class=\"err\">rounded<\/span> <span class=\"err\">border<\/span> <span class=\"err\">border-gray-300<\/span> <span class=\"err\">p-2<\/span> <span class=\"err\">shadow-sm;<\/span>\n        <span class=\"err\">@apply<\/span> <span class=\"err\">ring-1<\/span> <span class=\"err\">ring-inset<\/span> <span class=\"err\">ring-gray-300<\/span> <span class=\"py\">focus<\/span><span class=\"p\">:<\/span><span class=\"n\">ring-2<\/span> <span class=\"n\">focus<\/span><span class=\"p\">:<\/span><span class=\"n\">ring-inset<\/span> <span class=\"n\">focus<\/span><span class=\"p\">:<\/span><span class=\"n\">ring-slate-800<\/span><span class=\"p\">;<\/span>\n        <span class=\"err\">&amp;:disabled<\/span> <span class=\"err\">{<\/span>\n          <span class=\"err\">@apply<\/span> <span class=\"err\">border-gray-100<\/span> <span class=\"err\">ring-gray-200<\/span> <span class=\"py\">focus<\/span><span class=\"p\">:<\/span><span class=\"n\">ring-gray-500<\/span><span class=\"p\">;<\/span>\n\n          <span class=\"err\">&amp;:checked<\/span> <span class=\"err\">{<\/span>\n            <span class=\"err\">@apply<\/span> <span class=\"err\">bg-gray-200;<\/span>\n          <span class=\"p\">}<\/span>\n        <span class=\"err\">}<\/span>\n      <span class=\"err\">}<\/span>\n      <span class=\"nt\">input<\/span><span class=\"nd\">:disabled<\/span> <span class=\"o\">+<\/span> <span class=\"nt\">label<\/span> <span class=\"p\">{<\/span>\n        <span class=\"err\">@apply<\/span> <span class=\"err\">text-gray-500;<\/span>\n      <span class=\"p\">}<\/span>\n      <span class=\"nt\">select<\/span> <span class=\"p\">{<\/span>\n        <span class=\"err\">@apply<\/span> <span class=\"err\">w-96<\/span> <span class=\"err\">rounded-md<\/span> <span class=\"err\">border-0<\/span> <span class=\"err\">py-1.5;<\/span>\n      <span class=\"p\">}<\/span>\n\n      <span class=\"nt\">button<\/span> <span class=\"p\">{<\/span>\n        <span class=\"err\">@apply<\/span> <span class=\"err\">transition<\/span> <span class=\"py\">hover<\/span><span class=\"p\">:<\/span><span class=\"n\">bg-slate-200<\/span><span class=\"p\">;<\/span>\n      <span class=\"p\">}<\/span>\n    <span class=\"err\">}<\/span>\n  <span class=\"err\">}<\/span>\n\n  <span class=\"nt\">footer<\/span> <span class=\"p\">{<\/span>\n    <span class=\"err\">@apply<\/span> <span class=\"err\">mb-4<\/span> <span class=\"err\">rounded-b-lg<\/span> <span class=\"err\">border<\/span> <span class=\"err\">border-slate-300<\/span> <span class=\"err\">bg-slate-50<\/span> <span class=\"err\">p-4;<\/span>\n  <span class=\"p\">}<\/span>\n\n  <span class=\"nt\">aside<\/span> <span class=\"p\">{<\/span>\n    <span class=\"err\">@apply<\/span> <span class=\"err\">absolute<\/span> <span class=\"err\">right-0<\/span> <span class=\"err\">top-0<\/span> <span class=\"err\">m-4<\/span> <span class=\"err\">max-h-[90vh]<\/span> <span class=\"err\">w-96<\/span> <span class=\"err\">overflow-auto<\/span> <span class=\"err\">p-2;<\/span>\n    <span class=\"err\">@apply<\/span> <span class=\"err\">rounded-md<\/span> <span class=\"err\">border<\/span> <span class=\"err\">border-slate-300<\/span> <span class=\"err\">bg-white<\/span> <span class=\"err\">shadow;<\/span>\n\n    <span class=\"err\">&amp;[id=\"output\"]<\/span> <span class=\"err\">{<\/span>\n      <span class=\"err\">@apply<\/span> <span class=\"err\">left-0;<\/span>\n      <span class=\"err\">code<\/span> <span class=\"err\">{<\/span>\n        <span class=\"err\">@apply<\/span> <span class=\"err\">max-h-[90vh]<\/span> <span class=\"err\">overflow-y-scroll<\/span> <span class=\"err\">leading-4;<\/span>\n      <span class=\"p\">}<\/span>\n    <span class=\"err\">}<\/span>\n\n    <span class=\"nt\">nav<\/span> <span class=\"p\">{<\/span>\n      <span class=\"err\">@apply<\/span> <span class=\"err\">top-0<\/span> <span class=\"err\">flex<\/span> <span class=\"err\">justify-between<\/span> <span class=\"err\">bg-white;<\/span>\n\n      <span class=\"err\">a<\/span> <span class=\"err\">{<\/span>\n        <span class=\"err\">@apply<\/span> <span class=\"err\">rounded<\/span> <span class=\"err\">px-2<\/span> <span class=\"err\">py-1<\/span> <span class=\"err\">no-underline;<\/span>\n\n        <span class=\"err\">&amp;:hover<\/span> <span class=\"err\">{<\/span>\n          <span class=\"err\">@apply<\/span> <span class=\"err\">transition<\/span> <span class=\"py\">hover<\/span><span class=\"p\">:<\/span><span class=\"n\">bg-slate-200<\/span><span class=\"p\">;<\/span>\n        <span class=\"p\">}<\/span>\n\n        <span class=\"o\">&amp;[<\/span><span class=\"nt\">rel<\/span><span class=\"o\">=<\/span><span class=\"s1\">\"prev\"<\/span><span class=\"o\">]<\/span><span class=\"nd\">:before<\/span> <span class=\"p\">{<\/span>\n          <span class=\"nl\">content<\/span><span class=\"p\">:<\/span> <span class=\"s1\">\"\u2190\"<\/span><span class=\"p\">;<\/span>\n          <span class=\"err\">@apply<\/span> <span class=\"err\">mr-0.5;<\/span>\n        <span class=\"p\">}<\/span>\n\n        <span class=\"o\">&amp;[<\/span><span class=\"nt\">rel<\/span><span class=\"o\">=<\/span><span class=\"s1\">\"index\"<\/span><span class=\"o\">]<\/span><span class=\"nd\">:before<\/span> <span class=\"p\">{<\/span>\n          <span class=\"nl\">content<\/span><span class=\"p\">:<\/span> <span class=\"s1\">\"\u00a7\"<\/span><span class=\"p\">;<\/span>\n          <span class=\"err\">@apply<\/span> <span class=\"err\">mr-0.5;<\/span>\n        <span class=\"p\">}<\/span>\n\n        <span class=\"o\">&amp;[<\/span><span class=\"nt\">href<\/span><span class=\"o\">=<\/span><span class=\"s1\">\"#\"<\/span><span class=\"o\">]<\/span><span class=\"nd\">:after<\/span> <span class=\"p\">{<\/span>\n          <span class=\"nl\">content<\/span><span class=\"p\">:<\/span> <span class=\"s1\">\"\u21bb\"<\/span><span class=\"p\">;<\/span>\n          <span class=\"err\">@apply<\/span> <span class=\"err\">ml-0.5;<\/span>\n        <span class=\"p\">}<\/span>\n\n        <span class=\"o\">&amp;[<\/span><span class=\"nt\">rel<\/span><span class=\"o\">=<\/span><span class=\"s1\">\"next\"<\/span><span class=\"o\">]<\/span><span class=\"nd\">:after<\/span> <span class=\"p\">{<\/span>\n          <span class=\"nl\">content<\/span><span class=\"p\">:<\/span> <span class=\"s1\">\"\u2192\"<\/span><span class=\"p\">;<\/span>\n          <span class=\"err\">@apply<\/span> <span class=\"err\">ml-0.5;<\/span>\n        <span class=\"p\">}<\/span>\n      <span class=\"err\">}<\/span>\n    <span class=\"err\">}<\/span>\n\n    <span class=\"nt\">div<\/span> <span class=\"p\">{<\/span>\n      <span class=\"err\">@apply<\/span> <span class=\"err\">max-h-[80vh]<\/span> <span class=\"err\">overflow-y-scroll;<\/span>\n    <span class=\"p\">}<\/span>\n\n    <span class=\"nt\">hr<\/span> <span class=\"p\">{<\/span>\n      <span class=\"err\">@apply<\/span> <span class=\"err\">mx-1<\/span> <span class=\"err\">my-2;<\/span>\n    <span class=\"p\">}<\/span>\n\n    <span class=\"nt\">p<\/span> <span class=\"p\">{<\/span>\n      <span class=\"err\">@apply<\/span> <span class=\"err\">p-2<\/span> <span class=\"err\">text-base;<\/span>\n    <span class=\"p\">}<\/span>\n\n    <span class=\"nt\">code<\/span> <span class=\"p\">{<\/span>\n      <span class=\"err\">@apply<\/span> <span class=\"err\">mt-2<\/span> <span class=\"err\">block<\/span> <span class=\"err\">whitespace-pre-wrap<\/span> <span class=\"err\">px-2<\/span> <span class=\"err\">py-1<\/span> <span class=\"err\">leading-normal;<\/span>\n    <span class=\"p\">}<\/span>\n\n    <span class=\"nt\">input<\/span> <span class=\"p\">{<\/span>\n      <span class=\"err\">@apply<\/span> <span class=\"err\">m-0.5<\/span> <span class=\"err\">p-1<\/span> <span class=\"err\">font-mono<\/span> <span class=\"err\">text-base;<\/span>\n    <span class=\"p\">}<\/span>\n\n    <span class=\"nt\">label<\/span> <span class=\"p\">{<\/span>\n      <span class=\"err\">@apply<\/span> <span class=\"err\">m-0.5<\/span> <span class=\"err\">px-0.5<\/span> <span class=\"err\">font-mono<\/span> <span class=\"err\">text-base<\/span> <span class=\"err\">font-bold;<\/span>\n    <span class=\"p\">}<\/span>\n\n    <span class=\"nt\">button<\/span><span class=\"o\">[<\/span><span class=\"nt\">type<\/span><span class=\"o\">=<\/span><span class=\"s1\">\"button\"<\/span><span class=\"o\">]<\/span> <span class=\"p\">{<\/span>\n      <span class=\"err\">@apply<\/span> <span class=\"err\">my-1<\/span> <span class=\"err\">min-w-24<\/span> <span class=\"err\">rounded<\/span> <span class=\"err\">bg-slate-100<\/span> <span class=\"err\">px-2<\/span> <span class=\"err\">py-1;<\/span>\n\n      <span class=\"err\">&amp;:hover<\/span> <span class=\"err\">{<\/span>\n        <span class=\"err\">@apply<\/span> <span class=\"err\">transition<\/span> <span class=\"py\">hover<\/span><span class=\"p\">:<\/span><span class=\"n\">bg-slate-200<\/span><span class=\"p\">;<\/span>\n      <span class=\"p\">}<\/span>\n    <span class=\"err\">}<\/span>\n  <span class=\"err\">}<\/span>\n<span class=\"err\">}<\/span>\n\n<span class=\"k\">@layer<\/span> <span class=\"n\">components<\/span> <span class=\"p\">{<\/span>\n  <span class=\"nt\">code<\/span> <span class=\"p\">{<\/span>\n    <span class=\"err\">@apply<\/span> <span class=\"err\">relative<\/span> <span class=\"err\">inline-block<\/span> <span class=\"err\">rounded<\/span> <span class=\"err\">bg-slate-50<\/span> <span class=\"err\">px-1<\/span> <span class=\"err\">py-0.5<\/span> <span class=\"err\">font-mono;<\/span>\n\n    <span class=\"err\">span<\/span> <span class=\"err\">{<\/span>\n      <span class=\"err\">@apply<\/span> <span class=\"err\">text-green-600;<\/span>\n    <span class=\"p\">}<\/span>\n\n    <span class=\"nt\">em<\/span> <span class=\"p\">{<\/span>\n      <span class=\"err\">@apply<\/span> <span class=\"err\">text-gray-500;<\/span>\n    <span class=\"p\">}<\/span>\n\n    <span class=\"nt\">i<\/span> <span class=\"p\">{<\/span>\n      <span class=\"err\">@apply<\/span> <span class=\"err\">not-italic<\/span> <span class=\"err\">text-red-800;<\/span>\n    <span class=\"p\">}<\/span>\n\n    <span class=\"o\">&amp;[<\/span><span class=\"nt\">contenteditable<\/span><span class=\"o\">]<\/span> <span class=\"p\">{<\/span>\n      <span class=\"err\">@apply<\/span> <span class=\"err\">border<\/span> <span class=\"err\">border-green-100<\/span> <span class=\"err\">bg-green-50;<\/span>\n    <span class=\"p\">}<\/span>\n\n    <span class=\"o\">&amp;[<\/span><span class=\"nt\">contenteditable<\/span><span class=\"o\">]<\/span><span class=\"nd\">::after<\/span> <span class=\"p\">{<\/span>\n      <span class=\"nl\">content<\/span><span class=\"p\">:<\/span> <span class=\"s1\">\"\u270e\"<\/span><span class=\"p\">;<\/span>\n\n      <span class=\"err\">@apply<\/span> <span class=\"err\">absolute<\/span> <span class=\"err\">right-0<\/span> <span class=\"err\">top-0<\/span> <span class=\"err\">m-1<\/span> <span class=\"err\">inline-flex<\/span> <span class=\"err\">h-6<\/span> <span class=\"err\">w-6<\/span> <span class=\"err\">items-center<\/span> <span class=\"err\">justify-center;<\/span>\n      <span class=\"err\">@apply<\/span> <span class=\"err\">rounded-full<\/span> <span class=\"err\">bg-amber-100<\/span> <span class=\"err\">text-sm<\/span> <span class=\"err\">font-semibold<\/span> <span class=\"err\">text-black;<\/span>\n    <span class=\"p\">}<\/span>\n  <span class=\"p\">}<\/span>\n\n  <span class=\"nc\">.accordion<\/span> <span class=\"p\">{<\/span>\n    <span class=\"err\">article<\/span> <span class=\"err\">{<\/span>\n      <span class=\"err\">@apply<\/span> <span class=\"err\">p-0;<\/span>\n      <span class=\"err\">h3<\/span> <span class=\"err\">{<\/span>\n        <span class=\"err\">@apply<\/span> <span class=\"err\">border-b<\/span> <span class=\"err\">border-slate-300<\/span> <span class=\"err\">bg-slate-100;<\/span>\n        <span class=\"err\">@apply<\/span> <span class=\"err\">cursor-pointer;<\/span>\n        <span class=\"nl\">background-image<\/span><span class=\"p\">:<\/span> <span class=\"sx\">url(..\/images\/arrows.png)<\/span><span class=\"p\">;<\/span>\n        <span class=\"nl\">background-position<\/span><span class=\"p\">:<\/span> <span class=\"m\">98%<\/span> <span class=\"m\">12px<\/span><span class=\"p\">;<\/span>\n        <span class=\"nl\">background-repeat<\/span><span class=\"p\">:<\/span> <span class=\"nb\">no-repeat<\/span><span class=\"p\">;<\/span>\n\n        <span class=\"err\">&amp;:hover<\/span> <span class=\"err\">{<\/span>\n          <span class=\"err\">@apply<\/span> <span class=\"err\">bg-slate-200;<\/span>\n        <span class=\"p\">}<\/span>\n      <span class=\"err\">}<\/span>\n      <span class=\"nt\">p<\/span> <span class=\"p\">{<\/span>\n        <span class=\"err\">@apply<\/span> <span class=\"err\">hidden<\/span> <span class=\"err\">border-b<\/span> <span class=\"err\">border-slate-300;<\/span>\n      <span class=\"p\">}<\/span>\n    <span class=\"err\">}<\/span>\n  <span class=\"err\">}<\/span>\n\n  <span class=\"nc\">.events<\/span> <span class=\"p\">{<\/span>\n    <span class=\"err\">@apply<\/span> <span class=\"err\">list-none<\/span> <span class=\"err\">p-0;<\/span>\n    <span class=\"err\">li<\/span> <span class=\"err\">{<\/span>\n      <span class=\"err\">@apply<\/span> <span class=\"err\">p-[2px];<\/span>\n    <span class=\"p\">}<\/span>\n\n    <span class=\"nt\">li<\/span> <span class=\"nt\">span<\/span> <span class=\"p\">{<\/span>\n      <span class=\"err\">@apply<\/span> <span class=\"err\">mx-1<\/span> <span class=\"err\">mr-2<\/span> <span class=\"err\">inline-block<\/span> <span class=\"err\">min-w-6<\/span> <span class=\"err\">rounded-full<\/span> <span class=\"err\">bg-amber-400<\/span> <span class=\"err\">px-1<\/span> <span class=\"err\">text-center<\/span> <span class=\"err\">text-white;<\/span>\n    <span class=\"p\">}<\/span>\n  <span class=\"err\">}<\/span>\n<span class=\"err\">}<\/span>\n\n<span class=\"k\">@layer<\/span> <span class=\"n\">utilities<\/span> <span class=\"p\">{<\/span>\n  <span class=\"nc\">.formatter<\/span> <span class=\"p\">{<\/span>\n    <span class=\"err\">h1,<\/span>\n    <span class=\"err\">h2,<\/span>\n    <span class=\"err\">h3<\/span> <span class=\"err\">{<\/span>\n      <span class=\"err\">@apply<\/span> <span class=\"err\">px-4<\/span> <span class=\"err\">pb-1<\/span> <span class=\"err\">pt-2<\/span> <span class=\"err\">text-lg<\/span> <span class=\"err\">text-slate-900;<\/span>\n    <span class=\"p\">}<\/span>\n\n    <span class=\"nt\">h1<\/span> <span class=\"p\">{<\/span>\n      <span class=\"err\">&amp;::before<\/span> <span class=\"err\">{<\/span>\n        <span class=\"nl\">content<\/span><span class=\"p\">:<\/span> <span class=\"s1\">\"<\/span><span class=\"p\">;<\/span>\n        <span class=\"err\">@apply<\/span> <span class=\"err\">mx-2<\/span> <span class=\"err\">text-base<\/span> <span class=\"err\">text-sky-700;<\/span>\n      <span class=\"p\">}<\/span>\n\n      <span class=\"o\">&amp;<\/span><span class=\"nd\">::after<\/span> <span class=\"p\">{<\/span>\n        <span class=\"nl\">content<\/span><span class=\"p\">:<\/span> <span class=\"s1\">\"\"<\/span><span class=\"p\">;<\/span>\n        <span class=\"err\">@apply<\/span> <span class=\"err\">mx-2<\/span> <span class=\"err\">text-base<\/span> <span class=\"err\">text-sky-700;<\/span>\n      <span class=\"p\">}<\/span>\n    <span class=\"p\">}<\/span>\n    <span class=\"nt\">h2<\/span> <span class=\"p\">{<\/span>\n      <span class=\"err\">&amp;::before<\/span> <span class=\"err\">{<\/span>\n        <span class=\"nl\">content<\/span><span class=\"p\">:<\/span> <span class=\"s1\">\"<h2><span class=\"ez-toc-section\" id=\"%22\"><\/span>\"<span class=\"ez-toc-section-end\"><\/span><\/h2><\/span><span class=\"p\">;<\/span>\n        <span class=\"err\">@apply<\/span> <span class=\"err\">mx-2<\/span> <span class=\"err\">text-base<\/span> <span class=\"err\">text-sky-700;<\/span>\n      <span class=\"p\">}<\/span>\n\n      <span class=\"o\">&amp;<\/span><span class=\"nd\">::after<\/span> <span class=\"p\">{<\/span>\n        <span class=\"nl\">content<\/span><span class=\"p\">:<\/span> <span class=\"s1\">\"\"<\/span><span class=\"p\">;<\/span>\n        <span class=\"err\">@apply<\/span> <span class=\"err\">mx-2<\/span> <span class=\"err\">text-base<\/span> <span class=\"err\">text-sky-700;<\/span>\n      <span class=\"p\">}<\/span>\n    <span class=\"err\">}<\/span>\n    <span class=\"nt\">h3<\/span> <span class=\"p\">{<\/span>\n      <span class=\"err\">&amp;::before<\/span> <span class=\"err\">{<\/span>\n        <span class=\"nl\">content<\/span><span class=\"p\">:<\/span> <span class=\"s1\">\"<h3><span class=\"ez-toc-section\" id=\"%22-2\"><\/span>\"<span class=\"ez-toc-section-end\"><\/span><\/h3><\/span><span class=\"p\">;<\/span>\n        <span class=\"err\">@apply<\/span> <span class=\"err\">mx-1<\/span> <span class=\"err\">ml-2<\/span> <span class=\"err\">text-base<\/span> <span class=\"err\">text-sky-700;<\/span>\n      <span class=\"p\">}<\/span>\n\n      <span class=\"o\">&amp;<\/span><span class=\"nd\">::after<\/span> <span class=\"p\">{<\/span>\n        <span class=\"nl\">content<\/span><span class=\"p\">:<\/span> <span class=\"s1\">\"\"<\/span><span class=\"p\">;<\/span>\n        <span class=\"err\">@apply<\/span> <span class=\"err\">mx-1<\/span> <span class=\"err\">text-base<\/span> <span class=\"err\">text-sky-700;<\/span>\n      <span class=\"p\">}<\/span>\n    <span class=\"err\">}<\/span>\n    <span class=\"nt\">p<\/span> <span class=\"p\">{<\/span>\n      <span class=\"err\">@apply<\/span> <span class=\"err\">ml-2;<\/span>\n      <span class=\"err\">&amp;::before<\/span> <span class=\"err\">{<\/span>\n        <span class=\"nl\">content<\/span><span class=\"p\">:<\/span> <span class=\"s1\">\"<p>\"<\/p><\/span><span class=\"p\">;<\/span>\n        <span class=\"err\">@apply<\/span> <span class=\"err\">mr-1<\/span> <span class=\"err\">text-base<\/span> <span class=\"err\">text-sky-700;<\/span>\n      <span class=\"p\">}<\/span>\n\n      <span class=\"o\">&amp;<\/span><span class=\"nd\">::after<\/span> <span class=\"p\">{<\/span>\n        <span class=\"nl\">content<\/span><span class=\"p\">:<\/span> <span class=\"s1\">\"\"<\/span><span class=\"p\">;<\/span>\n        <span class=\"err\">@apply<\/span> <span class=\"err\">ml-1<\/span> <span class=\"err\">text-base<\/span> <span class=\"err\">text-sky-700;<\/span>\n      <span class=\"p\">}<\/span>\n    <span class=\"err\">}<\/span>\n    <span class=\"nt\">div<\/span> <span class=\"p\">{<\/span>\n      <span class=\"err\">@apply<\/span> <span class=\"err\">ml-6;<\/span>\n      <span class=\"err\">&amp;::before<\/span> <span class=\"err\">{<\/span>\n        <span class=\"nl\">content<\/span><span class=\"p\">:<\/span> <span class=\"s1\">\"<p>\"<span class=\"p\">;<\/span>\n        <span class=\"err\">@apply<\/span> <span class=\"err\">ml-1<\/span> <span class=\"err\">pl-2;<\/span>\n        <span class=\"err\">@apply<\/span> <span class=\"err\">border-l-4<\/span> <span class=\"err\">border-l-amber-500;<\/span>\n        <span class=\"err\">@apply<\/span> <span class=\"err\">mr-1<\/span> <span class=\"err\">block<\/span> <span class=\"err\">text-base<\/span> <span class=\"err\">text-sky-700;<\/span>\n      <span class=\"p\">}<\/span>\n\n      <span class=\"o\">&amp;<\/span><span class=\"nd\">::after<\/span> <span class=\"p\">{<\/span>\n        <span class=\"nl\">content<\/span><span class=\"p\">:<\/span> <span class=\"s1\">\"<\/span><\/p>\"<\/span><span class=\"p\">;<\/span>\n        <span class=\"err\">@apply<\/span> <span class=\"err\">ml-1<\/span> <span class=\"err\">pl-2;<\/span>\n        <span class=\"err\">@apply<\/span> <span class=\"err\">border-l-4<\/span> <span class=\"err\">border-l-amber-500;<\/span>\n        <span class=\"err\">@apply<\/span> <span class=\"err\">ml-1<\/span> <span class=\"err\">block<\/span> <span class=\"err\">text-base<\/span> <span class=\"err\">text-sky-700;<\/span>\n      <span class=\"p\">}<\/span>\n    <span class=\"err\">}<\/span>\n    <span class=\"nt\">li<\/span> <span class=\"p\">{<\/span>\n      <span class=\"err\">@apply<\/span> <span class=\"err\">ml-8;<\/span>\n      <span class=\"err\">&amp;::before<\/span> <span class=\"err\">{<\/span>\n        <span class=\"nl\">content<\/span><span class=\"p\">:<\/span> <span class=\"s1\">\"<li>\"<\/li><\/span><span class=\"p\">;<\/span>\n        <span class=\"err\">@apply<\/span> <span class=\"err\">mr-1<\/span> <span class=\"err\">text-base<\/span> <span class=\"err\">text-sky-700;<\/span>\n      <span class=\"p\">}<\/span>\n\n      <span class=\"o\">&amp;<\/span><span class=\"nd\">::after<\/span> <span class=\"p\">{<\/span>\n        <span class=\"nl\">content<\/span><span class=\"p\">:<\/span> <span class=\"s1\">\"\"<\/span><span class=\"p\">;<\/span>\n        <span class=\"err\">@apply<\/span> <span class=\"err\">ml-1<\/span> <span class=\"err\">text-base<\/span> <span class=\"err\">text-sky-700;<\/span>\n      <span class=\"p\">}<\/span>\n    <span class=\"err\">}<\/span>\n\n    <span class=\"nt\">header<\/span><span class=\"o\">,<\/span>\n    <span class=\"nt\">main<\/span><span class=\"o\">,<\/span>\n    <span class=\"nt\">article<\/span><span class=\"o\">,<\/span>\n    <span class=\"nt\">article<\/span> <span class=\"nt\">ul<\/span><span class=\"o\">,<\/span>\n    <span class=\"nt\">div<\/span><span class=\"o\">,<\/span>\n    <span class=\"nt\">footer<\/span> <span class=\"p\">{<\/span>\n      <span class=\"nl\">background-image<\/span><span class=\"p\">:<\/span> <span class=\"sx\">url(\"data:image\/svg+xml,%3Csvg width=\"10\" height=\"10\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox='0 0 10 10'%3E%3Cellipse style=\"fill: rgb(245, 158, 11)<\/span><span class=\"p\">;<\/span><span class=\"err\">\"<\/span> <span class=\"err\">cx='6'<\/span> <span class=\"err\">cy='1'<\/span> <span class=\"err\">rx='1'<\/span> <span class=\"err\">ry='1'\/%3E%3C\/svg%3E\");<\/span>\n      <span class=\"nl\">background-position<\/span><span class=\"p\">:<\/span> <span class=\"nb\">left<\/span><span class=\"p\">;<\/span>\n      <span class=\"nl\">background-repeat<\/span><span class=\"p\">:<\/span> <span class=\"nb\">repeat-y<\/span><span class=\"p\">;<\/span>\n    <span class=\"p\">}<\/span>\n\n    <span class=\"nt\">header<\/span> <span class=\"p\">{<\/span>\n      <span class=\"err\">&amp;::before<\/span> <span class=\"err\">{<\/span>\n        <span class=\"nl\">content<\/span><span class=\"p\">:<\/span> <span class=\"s1\">\"<header>\"<\/header><\/span><span class=\"p\">;<\/span>\n        <span class=\"err\">@apply<\/span> <span class=\"err\">ml-1<\/span> <span class=\"err\">pl-2;<\/span>\n        <span class=\"err\">@apply<\/span> <span class=\"err\">border-l-4<\/span> <span class=\"err\">border-l-amber-500;<\/span>\n        <span class=\"err\">@apply<\/span> <span class=\"err\">text-base<\/span> <span class=\"err\">text-sky-700;<\/span>\n      <span class=\"p\">}<\/span>\n\n      <span class=\"o\">&amp;<\/span><span class=\"nd\">::after<\/span> <span class=\"p\">{<\/span>\n        <span class=\"nl\">content<\/span><span class=\"p\">:<\/span> <span class=\"s1\">\"\"<\/span><span class=\"p\">;<\/span>\n        <span class=\"err\">@apply<\/span> <span class=\"err\">ml-1<\/span> <span class=\"err\">pl-2;<\/span>\n        <span class=\"err\">@apply<\/span> <span class=\"err\">border-l-4<\/span> <span class=\"err\">border-l-amber-500;<\/span>\n        <span class=\"err\">@apply<\/span> <span class=\"err\">text-base<\/span> <span class=\"err\">text-sky-700;<\/span>\n      <span class=\"p\">}<\/span>\n    <span class=\"err\">}<\/span>\n\n    <span class=\"nt\">main<\/span> <span class=\"p\">{<\/span>\n      <span class=\"err\">&amp;::before<\/span> <span class=\"err\">{<\/span>\n        <span class=\"nl\">content<\/span><span class=\"p\">:<\/span> <span class=\"s1\">\"<main>\"<\/main><\/span><span class=\"p\">;<\/span>\n        <span class=\"err\">@apply<\/span> <span class=\"err\">ml-1<\/span> <span class=\"err\">pl-2;<\/span>\n        <span class=\"err\">@apply<\/span> <span class=\"err\">border-l-4<\/span> <span class=\"err\">border-l-amber-500;<\/span>\n        <span class=\"err\">@apply<\/span> <span class=\"err\">text-base<\/span> <span class=\"err\">text-sky-700;<\/span>\n      <span class=\"p\">}<\/span>\n\n      <span class=\"o\">&amp;<\/span><span class=\"nd\">::after<\/span> <span class=\"p\">{<\/span>\n        <span class=\"nl\">content<\/span><span class=\"p\">:<\/span> <span class=\"s1\">\"\"<\/span><span class=\"p\">;<\/span>\n        <span class=\"err\">@apply<\/span> <span class=\"err\">ml-1<\/span> <span class=\"err\">pl-2;<\/span>\n        <span class=\"err\">@apply<\/span> <span class=\"err\">border-l-4<\/span> <span class=\"err\">border-l-amber-500;<\/span>\n        <span class=\"err\">@apply<\/span> <span class=\"err\">text-base<\/span> <span class=\"err\">text-sky-700;<\/span>\n      <span class=\"p\">}<\/span>\n    <span class=\"err\">}<\/span>\n    <span class=\"nt\">article<\/span> <span class=\"p\">{<\/span>\n      <span class=\"err\">@apply<\/span> <span class=\"err\">ml-6<\/span> <span class=\"err\">mt-4<\/span> <span class=\"err\">py-0;<\/span>\n      <span class=\"err\">&amp;::before<\/span> <span class=\"err\">{<\/span>\n        <span class=\"nl\">content<\/span><span class=\"p\">:<\/span> <span class=\"s1\">\"<article>\"<\/article><\/span><span class=\"p\">;<\/span>\n        <span class=\"err\">@apply<\/span> <span class=\"err\">ml-1<\/span> <span class=\"err\">block<\/span> <span class=\"err\">pl-2;<\/span>\n        <span class=\"err\">@apply<\/span> <span class=\"err\">border-l-4<\/span> <span class=\"err\">border-l-amber-500;<\/span>\n        <span class=\"err\">@apply<\/span> <span class=\"err\">text-base<\/span> <span class=\"err\">text-sky-700;<\/span>\n      <span class=\"p\">}<\/span>\n\n      <span class=\"o\">&amp;<\/span><span class=\"nd\">::after<\/span> <span class=\"p\">{<\/span>\n        <span class=\"nl\">content<\/span><span class=\"p\">:<\/span> <span class=\"s1\">\"\"<\/span><span class=\"p\">;<\/span>\n        <span class=\"err\">@apply<\/span> <span class=\"err\">ml-1<\/span> <span class=\"err\">block<\/span> <span class=\"err\">pl-2;<\/span>\n        <span class=\"err\">@apply<\/span> <span class=\"err\">border-l-4<\/span> <span class=\"err\">border-l-amber-500;<\/span>\n        <span class=\"err\">@apply<\/span> <span class=\"err\">text-base<\/span> <span class=\"err\">text-sky-700;<\/span>\n      <span class=\"p\">}<\/span>\n      <span class=\"nt\">span<\/span> <span class=\"p\">{<\/span>\n        <span class=\"err\">&amp;::before<\/span> <span class=\"err\">{<\/span>\n          <span class=\"nl\">content<\/span><span class=\"p\">:<\/span> <span class=\"s1\">\"<span>\"<\/span><span class=\"p\">;<\/span>\n          <span class=\"err\">@apply<\/span> <span class=\"err\">mr-1<\/span> <span class=\"err\">inline-block<\/span> <span class=\"err\">text-base<\/span> <span class=\"err\">text-sky-700;<\/span>\n        <span class=\"p\">}<\/span>\n\n        <span class=\"o\">&amp;<\/span><span class=\"nd\">::after<\/span> <span class=\"p\">{<\/span>\n          <span class=\"nl\">content<\/span><span class=\"p\">:<\/span> <span class=\"s1\">\"<\/span>\"<\/span><span class=\"p\">;<\/span>\n          <span class=\"err\">@apply<\/span> <span class=\"err\">ml-1<\/span> <span class=\"err\">inline-block<\/span> <span class=\"err\">text-base<\/span> <span class=\"err\">text-sky-700;<\/span>\n        <span class=\"p\">}<\/span>\n      <span class=\"err\">}<\/span>\n      <span class=\"nt\">i<\/span> <span class=\"p\">{<\/span>\n        <span class=\"err\">@apply<\/span> <span class=\"err\">not-italic;<\/span>\n        <span class=\"err\">&amp;::before<\/span> <span class=\"err\">{<\/span>\n          <span class=\"nl\">content<\/span><span class=\"p\">:<\/span> <span class=\"s1\">\"<i>\"<\/i><\/span><span class=\"p\">;<\/span>\n          <span class=\"err\">@apply<\/span> <span class=\"err\">mr-1<\/span> <span class=\"err\">inline-block<\/span> <span class=\"err\">text-base<\/span> <span class=\"err\">text-sky-700;<\/span>\n        <span class=\"p\">}<\/span>\n\n        <span class=\"o\">&amp;<\/span><span class=\"nd\">::after<\/span> <span class=\"p\">{<\/span>\n          <span class=\"nl\">content<\/span><span class=\"p\">:<\/span> <span class=\"s1\">\"\"<\/span><span class=\"p\">;<\/span>\n          <span class=\"err\">@apply<\/span> <span class=\"err\">ml-1<\/span> <span class=\"err\">inline-block<\/span> <span class=\"err\">text-base<\/span> <span class=\"err\">text-sky-700;<\/span>\n        <span class=\"p\">}<\/span>\n      <span class=\"err\">}<\/span>\n    <span class=\"err\">}<\/span>\n\n    <span class=\"nt\">ul<\/span> <span class=\"p\">{<\/span>\n      <span class=\"err\">@apply<\/span> <span class=\"err\">ml-7<\/span> <span class=\"err\">mt-4<\/span> <span class=\"err\">py-0;<\/span>\n      <span class=\"err\">&amp;::before<\/span> <span class=\"err\">{<\/span>\n        <span class=\"nl\">content<\/span><span class=\"p\">:<\/span> <span class=\"s1\">\"<\/span><span class=\"p\">;<\/span>\n        <span class=\"err\">@apply<\/span> <span class=\"err\">ml-1<\/span> <span class=\"err\">pl-2;<\/span>\n        <span class=\"err\">@apply<\/span> <span class=\"err\">border-l-4<\/span> <span class=\"err\">border-l-amber-500;<\/span>\n        <span class=\"err\">@apply<\/span> <span class=\"err\">text-base<\/span> <span class=\"err\">text-sky-700;<\/span>\n      <span class=\"p\">}<\/span>\n\n      <span class=\"o\">&amp;<\/span><span class=\"nd\">::after<\/span> <span class=\"p\">{<\/span>\n        <span class=\"nl\">content<\/span><span class=\"p\">:<\/span> <span class=\"s1\">\"\"<\/span><span class=\"p\">;<\/span>\n        <span class=\"err\">@apply<\/span> <span class=\"err\">ml-1<\/span> <span class=\"err\">pl-2;<\/span>\n        <span class=\"err\">@apply<\/span> <span class=\"err\">border-l-4<\/span> <span class=\"err\">border-l-amber-500;<\/span>\n        <span class=\"err\">@apply<\/span> <span class=\"err\">text-base<\/span> <span class=\"err\">text-sky-700;<\/span>\n      <span class=\"p\">}<\/span>\n    <span class=\"err\">}<\/span>\n\n    <span class=\"nt\">footer<\/span> <span class=\"p\">{<\/span>\n      <span class=\"err\">&amp;::before<\/span> <span class=\"err\">{<\/span>\n        <span class=\"nl\">content<\/span><span class=\"p\">:<\/span> <span class=\"s1\">\"<footer>\"<\/footer><\/span><span class=\"p\">;<\/span>\n        <span class=\"err\">@apply<\/span> <span class=\"err\">ml-1<\/span> <span class=\"err\">block<\/span> <span class=\"err\">pl-2;<\/span>\n        <span class=\"err\">@apply<\/span> <span class=\"err\">border-l-4<\/span> <span class=\"err\">border-l-amber-500;<\/span>\n        <span class=\"err\">@apply<\/span> <span class=\"err\">text-base<\/span> <span class=\"err\">text-sky-700;<\/span>\n      <span class=\"p\">}<\/span>\n\n      <span class=\"o\">&amp;<\/span><span class=\"nd\">::after<\/span> <span class=\"p\">{<\/span>\n        <span class=\"nl\">content<\/span><span class=\"p\">:<\/span> <span class=\"s1\">\"\"<\/span><span class=\"p\">;<\/span>\n        <span class=\"err\">@apply<\/span> <span class=\"err\">ml-1<\/span> <span class=\"err\">block<\/span> <span class=\"err\">pl-2;<\/span>\n        <span class=\"err\">@apply<\/span> <span class=\"err\">border-l-4<\/span> <span class=\"err\">border-l-amber-500;<\/span>\n        <span class=\"err\">@apply<\/span> <span class=\"err\">text-base<\/span> <span class=\"err\">text-sky-700;<\/span>\n      <span class=\"p\">}<\/span>\n    <span class=\"err\">}<\/span>\n  <span class=\"err\">}<\/span>\n<span class=\"err\">}<\/span>\n\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/details>\n<h3><span class=\"ez-toc-section\" id=\"%DA%A9%D9%84%D8%A7%D8%B3_%D9%87%D8%A7%DB%8C_Tailwind_%D8%B1%D8%A7_%D8%A7%D8%B2_%D9%81%D8%A7%DB%8C%D9%84_%D8%AD%D8%B0%D9%81_%DA%A9%D9%86%DB%8C%D8%AF_appviewslayoutsapplicationhtmlerb\"><\/span>\n<p>  \u06a9\u0644\u0627\u0633 \u0647\u0627\u06cc Tailwind \u0631\u0627 \u0627\u0632 \u0641\u0627\u06cc\u0644 \u062d\u0630\u0641 \u06a9\u0646\u06cc\u062f <code>app\/views\/layouts\/application.html.erb<\/code><br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<details>\n<summary>\u0646\u0645\u0627\u06cc\u0634 \u0628\u06cc\u0634\u062a\u0631\u2026<\/summary>\n<p>\u062f\u0631 \u0622\u0631\u0634\u06cc\u0648 <code>application.html.erb<\/code>\u060c \u0628\u0631\u0686\u0633\u0628 \u0631\u0627 \u062d\u0630\u0641 \u06cc\u0627 \u0646\u0638\u0631 \u062f\u0647\u06cc\u062f <code><main\/><\/code>\u060c \u06a9\u0647 \u0642\u0628\u0644 \u0648 \u0628\u0639\u062f \u0627\u0632 \u062a\u06af \u0627\u0633\u062a <code>&lt;%= yield %&gt;<\/code> \u0628\u0647 \u0637\u0648\u0631\u06cc \u06a9\u0647 \u0631\u0641\u062a\u0627\u0631 \u0627\u0633\u062a\u0627\u06cc\u0644 \u0633\u0641\u0627\u0631\u0634\u06cc \u06a9\u0647 \u0628\u0631\u0627\u06cc Tailwind \u0627\u06cc\u062c\u0627\u062f \u06a9\u0631\u062f\u06cc\u0645 \u062a\u063a\u06cc\u06cc\u0631 \u0646\u06a9\u0646\u062f.<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight html\"><code>    <span class=\"nt\">&lt;<\/span><span class=\"err\">%<\/span><span class=\"na\">#<\/span> <span class=\"err\">&lt;<\/span><span class=\"na\">main<\/span> <span class=\"na\">class=<\/span><span class=\"s\">\"container mx-auto mt-28 px-5 flex\"<\/span><span class=\"nt\">&gt;<\/span> %&gt;\n      <span class=\"nt\">&lt;<\/span><span class=\"err\">%=<\/span> <span class=\"na\">yield<\/span> <span class=\"err\">%<\/span><span class=\"nt\">&gt;<\/span>\n    <span class=\"nt\">&lt;<\/span><span class=\"err\">%<\/span><span class=\"na\">#<\/span> <span class=\"err\"\/><span class=\"na\">main<\/span><span class=\"nt\">&gt;<\/span> %&gt;\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/details>\n<h3><span class=\"ez-toc-section\" id=\"%D8%A8%D8%B1%D8%AE%DB%8C_%D8%A7%D8%B2_%D9%85%D8%B1%D8%A7%D8%AD%D9%84_%D8%A7%D8%B6%D8%A7%D9%81%DB%8C_%D8%A8%D8%B1%D8%A7%DB%8C_%DA%A9%D8%A7%D8%B1%D8%A2%D9%85%D8%AF_%DA%A9%D8%B1%D8%AF%D9%86_%DB%8C%DA%A9_%D8%B8%D8%A7%D9%87%D8%B1_%D8%B7%D8%B1%D8%A7%D8%AD%DB%8C_%D8%B4%D8%AF%D9%87_%D8%A8%D9%87_%D9%81%D8%A7%DB%8C%D9%84%E2%80%8C%D9%87%D8%A7%DB%8C_Tailwind_%D8%B3%D9%81%D8%A7%D8%B1%D8%B4%DB%8C\"><\/span>\n<p>  \u0628\u0631\u062e\u06cc \u0627\u0632 \u0645\u0631\u0627\u062d\u0644 \u0627\u0636\u0627\u0641\u06cc \u0628\u0631\u0627\u06cc \u06a9\u0627\u0631\u0622\u0645\u062f \u06a9\u0631\u062f\u0646 \u06cc\u06a9 \u0638\u0627\u0647\u0631 \u0637\u0631\u0627\u062d\u06cc \u0634\u062f\u0647 \u0628\u0647 \u0641\u0627\u06cc\u0644\u200c\u0647\u0627\u06cc Tailwind \u0633\u0641\u0627\u0631\u0634\u06cc.<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<details>\n<summary>\u0646\u0645\u0627\u06cc\u0634 \u0628\u06cc\u0634\u062a\u0631\u2026<\/summary>\n<p>\u0627\u06af\u0631 \u0645\u0631\u0627\u062d\u0644 \u0642\u0628\u0644\u06cc \u0631\u0627 \u062f\u0646\u0628\u0627\u0644 \u06a9\u0631\u062f\u06cc\u062f\u060c \u0641\u0627\u06cc\u0644 <code>app\/assets\/stylesheets\/application.tailwind.css<\/code> \u0641\u0642\u0637 \u0628\u0627\u06cc\u062f \u062e\u0637 \u062f\u0627\u0634\u062a\u0647 \u0628\u0627\u0634\u062f <code>@import \".\/custom_tailwind\/custom1.css\";<\/code> \u0628\u062f\u0648\u0646 \u0646\u0638\u0631<\/p>\n<p>\u0641\u0642\u0637 \u0628\u0627\u06cc\u062f \u06cc\u06a9 \u0633\u0628\u06a9 \u0628\u062f\u0648\u0646 \u0646\u0638\u0631 \u0648\u062c\u0648\u062f \u062f\u0627\u0634\u062a\u0647 \u0628\u0627\u0634\u062f. \u0628\u0631\u0627\u06cc \u062a\u0633\u062a \u06cc\u06a9 \u0633\u0628\u06a9 \u062f\u06cc\u06af\u0631\u060c \u0627\u0628\u062a\u062f\u0627 \u062f\u0631 \u0645\u0648\u0631\u062f \u0627\u0633\u062a\u0627\u06cc\u0644\u06cc \u06a9\u0647 \u062f\u0631 \u062d\u0627\u0644 \u062d\u0627\u0636\u0631 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc\u200c\u0634\u0648\u062f \u0646\u0638\u0631 \u062f\u0647\u06cc\u062f \u0648 \u0633\u0628\u06a9 \u062f\u06cc\u06af\u0631\u06cc \u0631\u0627 \u06a9\u0647 \u0645\u06cc\u200c\u062e\u0648\u0627\u0647\u06cc\u062f \u062a\u0633\u062a \u06a9\u0646\u06cc\u062f\u060c \u0644\u063a\u0648 \u0646\u0638\u0631 \u06a9\u0646\u06cc\u062f.<\/p>\n<p>\u067e\u0633 \u0627\u0632 \u0627\u0646\u062a\u062e\u0627\u0628 \u06cc\u06a9\u06cc \u0627\u0632 \u0633\u0628\u06a9 \u0647\u0627\u06cc \u0633\u0641\u0627\u0631\u0634\u06cc \u0645\u0648\u062c\u0648\u062f\u060c \u062f\u0633\u062a\u0648\u0631 \u0632\u06cc\u0631 \u0631\u0627 \u0627\u062c\u0631\u0627 \u06a9\u0646\u06cc\u062f:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight shell\"><code><span class=\"nv\">$ <\/span>bin\/rails assets:precompile\n<span class=\"nv\">$ <\/span>bin\/dev \n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u0627\u06af\u0631 \u062f\u0633\u062a\u0648\u0631 \u0642\u0628\u0644\u06cc \u0628\u0631\u0627\u06cc \u0627\u0633\u062a\u0627\u06cc\u0644 \u062f\u0627\u062f\u0646 \u0628\u0647 \u0639\u0646\u0627\u0635\u0631 HTML \u06a9\u0627\u0631 \u0646\u0645\u06cc\u200c\u06a9\u0646\u062f\u060c \u0627\u0628\u062a\u062f\u0627 \u0641\u0627\u06cc\u0644\u200c\u0647\u0627\u06cc \u0642\u0628\u0644\u06cc \u0631\u0627 \u067e\u0627\u06a9\u0633\u0627\u0632\u06cc \u06a9\u0631\u062f\u0647 \u0648 \u062f\u0648\u0628\u0627\u0631\u0647 \u0627\u0632 \u067e\u06cc\u0634 \u06a9\u0627\u0645\u067e\u0627\u06cc\u0644 \u06a9\u0646\u06cc\u062f:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight shell\"><code><span class=\"nv\">$ <\/span>bin\/rails assets:clobber \n<span class=\"nv\">$ <\/span>bin\/rails assets:precompile\n<span class=\"nv\">$ <\/span>bin\/dev \n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/details>\n<p><\/p>\n<h3><span class=\"ez-toc-section\" id=\"%D8%A7%DA%A9%D9%86%D9%88%D9%86%D8%8C_%D9%85%D9%82%D8%AF%D8%A7%D8%B1%DB%8C_%D8%A7%D8%B3%D8%AA%D8%A7%DB%8C%D9%84_HTML_%D8%A8%D8%A7_%D8%A7%D8%B3%D8%AA%D9%81%D8%A7%D8%AF%D9%87_%D8%A7%D8%B2_Tailwind_%D8%A8%D9%87_%D8%B9%D9%86%D9%88%D8%A7%D9%86_%DB%8C%DA%A9_%DA%86%D8%A7%D8%B1%DA%86%D9%88%D8%A8_%D8%A8%D8%AF%D9%88%D9%86_%DA%A9%D9%84%D8%A7%D8%B3_%F0%9F%A4%A9\"><\/span>\n<p>  \u0627\u06a9\u0646\u0648\u0646\u060c \u0645\u0642\u062f\u0627\u0631\u06cc \u0627\u0633\u062a\u0627\u06cc\u0644 HTML \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 Tailwind \u0628\u0647 \u0639\u0646\u0648\u0627\u0646 \u06cc\u06a9 \u0686\u0627\u0631\u0686\u0648\u0628 \u0628\u062f\u0648\u0646 \u06a9\u0644\u0627\u0633 \ud83e\udd29<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\u067e\u0633 \u0627\u0632 \u067e\u06cc\u06a9\u0631\u0628\u0646\u062f\u06cc Tailwind \u0628\u0627 \u0633\u0641\u0627\u0631\u0634\u06cc\u200c\u0633\u0627\u0632\u06cc\u200c\u0647\u0627\u06cc \u0628\u0627\u0644\u0627 \u0648 \u0631\u0627\u0647\u200c\u0627\u0646\u062f\u0627\u0632\u06cc \u0633\u0631\u0648\u0631 Rails\u060c HTML \u0627\u0633\u062a\u0627\u06cc\u0644\u200c\u0634\u062f\u0647 \u062e\u0648\u062f \u0631\u0627 \u062e\u0648\u0627\u0647\u06cc\u062f \u062f\u06cc\u062f.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"%D8%AD%D8%A7%D9%84%D8%AA_%D8%AA%D8%A7%D8%B1%DB%8C%DA%A9\"><\/span>\n<p>  \u062d\u0627\u0644\u062a \u062a\u0627\u0631\u06cc\u06a9<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\u0628\u0631\u062e\u06cc \u0627\u0632 \u0633\u0628\u06a9 \u0647\u0627 \u06af\u0632\u06cc\u0646\u0647 \u0627\u06cc \u0628\u0631\u0627\u06cc \u062d\u0627\u0644\u062a \u062a\u0627\u0631\u06cc\u06a9 \u062f\u0627\u0631\u0646\u062f. \u0628\u0631\u0627\u06cc \u062a\u0623\u06cc\u06cc\u062f\u060c \u0645\u0648\u0636\u0648\u0639 \u0631\u0627\u06cc\u0627\u0646\u0647 \u062e\u0648\u062f \u0631\u0627 \u062f\u0631 \u06af\u0632\u06cc\u0646\u0647\u200c\u0647\u0627\u06cc \u0633\u0641\u0627\u0631\u0634\u06cc\u200c\u0633\u0627\u0632\u06cc \u0631\u0646\u06af \u062a\u063a\u06cc\u06cc\u0631 \u062f\u0647\u06cc\u062f. \u0648\u06cc\u0646\u062f\u0648\u0632 \u0631\u0627 \u062c\u0633\u062a\u062c\u0648 \u06a9\u0646\u06cc\u062f <code>Ativar modo escuro para apps<\/code> \u0648 \u0628\u06cc\u0646 \u062d\u0627\u0644\u062a \u062a\u0627\u0631\u06cc\u06a9 \u06cc\u0627 \u0631\u0648\u0634\u0646 \u0633\u0648\u0626\u06cc\u0686 \u06a9\u0646\u06cc\u062f. \u0635\u0641\u062d\u0647 HTML \u0628\u0627\u06cc\u062f \u067e\u0633 \u0627\u0632 \u062a\u063a\u06cc\u06cc\u0631 \u0633\u06cc\u0633\u062a\u0645 \u0639\u0627\u0645\u0644 \u0628\u0647 \u0637\u0648\u0631 \u062e\u0648\u062f\u06a9\u0627\u0631 \u062a\u063a\u06cc\u06cc\u0631 \u06a9\u0646\u062f \u06a9\u0647 \u0646\u0634\u0627\u0646 \u0645\u06cc \u062f\u0647\u062f \u0627\u0632 \u062d\u0627\u0644\u062a \u0631\u0648\u0634\u0646 \u0648 \u062a\u0627\u0631\u06cc\u06a9 \u067e\u0634\u062a\u06cc\u0628\u0627\u0646\u06cc \u0645\u06cc \u06a9\u0646\u062f.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"%D9%85%D8%B1%D8%A7%D8%AD%D9%84_%D8%A8%D8%B9%D8%AF%DB%8C\"><\/span>\n<p>  \u0645\u0631\u0627\u062d\u0644 \u0628\u0639\u062f\u06cc<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n[x]  \u0633\u0628\u06a9 \u0647\u0627 \u0631\u0627 \u0628\u0631 \u0627\u0633\u0627\u0633 \u062a\u0631\u062c\u06cc\u062d \u062e\u0648\u062f \u0633\u0627\u0632\u0645\u0627\u0646\u062f\u0647\u06cc \u06a9\u0646\u06cc\u062f.<br \/>[x]  \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u06cc\u06a9 \u0638\u0627\u0647\u0631 \u0637\u0631\u0627\u062d\u06cc \u0634\u062f\u0647 \u0627\u0632 \u0641\u0627\u06cc\u0644 \u0647\u0627\u06cc CSS \u067e\u0631\u0648\u0698\u0647\u060c \u0628\u062f\u0648\u0646 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 CDN.<br \/>[x]  \u0642\u0627\u0628\u0644\u06cc\u062a\u200c\u0647\u0627\u06cc \u06cc\u06a9 \u0686\u0627\u0631\u0686\u0648\u0628 CSS \u0628\u062f\u0648\u0646 \u06a9\u0644\u0627\u0633 \u0631\u0627 \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 Tailwind \u062a\u06a9\u0631\u0627\u0631 \u06a9\u0646\u06cc\u062f.<br \/>[-]  \u062a\u063a\u06cc\u06cc\u0631\u0627\u062a \u0627\u06cc\u062c\u0627\u062f \u0634\u062f\u0647 \u062f\u0631 \u067e\u0631\u0648\u0698\u0647 \u0631\u0627 \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0645\u0631\u0648\u0631\u06af\u0631 \u0628\u0647 \u0635\u0648\u0631\u062a \u067e\u0648\u06cc\u0627 \u0628\u0647 \u0631\u0648\u0632 \u06a9\u0646\u06cc\u062f <code>Rails Live Reload<\/code>;<br \/>[-]  \u0627\u06af\u0631 \u0645\u06cc \u062e\u0648\u0627\u0647\u06cc\u062f \u0632\u0645\u0627\u0646 \u0628\u06cc\u0634\u062a\u0631\u06cc \u0631\u0627 \u062f\u0631 \u0642\u0633\u0645\u062a \u062c\u0644\u0648\u06cc\u06cc \u0628\u06af\u0630\u0631\u0627\u0646\u06cc\u062f\u060c \u06af\u0632\u06cc\u0646\u0647 \u0647\u0627\u06cc \u0633\u0641\u0627\u0631\u0634\u06cc \u0633\u0627\u0632\u06cc \u0633\u0628\u06a9 \u0645\u0648\u0631\u062f \u0639\u0644\u0627\u0642\u0647 \u062e\u0648\u062f \u0631\u0627 \u0628\u0631\u0631\u0633\u06cc \u06a9\u0646\u06cc\u062f.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"%D9%85%D8%B1%D8%A7%D8%AC%D8%B9\"><\/span>\n<p>  \u0645\u0631\u0627\u062c\u0639<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<\/p><\/div>\n","protected":false},"excerpt":{"rendered":"<p>\u0627\u06cc\u0646 \u0645\u0642\u0627\u0644\u0647 \u0628\u0647 \u0639\u0645\u062f \u0628\u0633\u06cc\u0627\u0631 \u0634\u0628\u06cc\u0647 \u0628\u0647 \u0645\u0642\u0627\u0644\u0627\u062a \u0642\u0628\u0644\u06cc \u0627\u06cc\u0646 \u0645\u062c\u0645\u0648\u0639\u0647 \u0627\u0633\u062a\u060c \u0627\u0645\u0627 \u0627\u06cc\u0646 \u0628\u0627\u0631 \u0627\u0632 \u0641\u0631\u06cc\u0645 \u0648\u0631\u06a9 Tailwind \u0628\u0647 \u0639\u0646\u0648\u0627\u0646 \u06cc\u06a9 \u0641\u0631\u06cc\u0645\u0648\u0631\u06a9 \u0628\u062f\u0648\u0646 \u06a9\u0644\u0627\u0633 css \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u062e\u0648\u0627\u0647\u06cc\u0645 \u06a9\u0631\u062f. \u0627\u0632 \u0645\u0642\u0627\u0644\u0647 CSS \u0628\u062f\u0648\u0646 \u06a9\u0644\u0627\u0633 \u0628\u0631 \u0627\u0633\u0627\u0633 Tailwind \u0627\u0644\u0647\u0627\u0645 \u06af\u0631\u0641\u062a\u0647 \u0634\u062f\u0647 \u0627\u0633\u062a \u06cc\u06a9 \u0628\u0631\u0646\u0627\u0645\u0647 \u062c\u062f\u06cc\u062f Rails \u0631\u0627 \u0634\u0631\u0648\u0639 \u06a9\u0646\u06cc\u062f O time \u0642\u0628\u0644 \u0627\u0632 \u0641\u0631\u0645\u0627\u0646 rails \u0628\u0631\u0627\u06cc &hellip;<\/p>\n","protected":false},"author":2,"featured_media":94138,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"fifu_image_url":"https:\/\/media2.dev.to\/dynamic\/image\/width=1000,height=500,fit=cover,gravity=auto,format=auto\/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fjuc5i5gj3zd15vfiny9c.png","fifu_image_alt":"","footnotes":""},"categories":[339],"tags":[],"class_list":["post-94137","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-dev"],"_links":{"self":[{"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/posts\/94137","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/comments?post=94137"}],"version-history":[{"count":0,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/posts\/94137\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/media\/94138"}],"wp:attachment":[{"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/media?parent=94137"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/categories?post=94137"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/tags?post=94137"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}