LN Webworks: Integrating Drupal And Tailwind CSS: Step-By-Step Guide
It’s hectic and time-consuming when it comes to making something that takes a long time. Yes, we are talking about CSS stylesheets. It’s not easy to design a website because it’s not ‘effortless’.
In this blog, we will talk about the Integration of Drupal and Tailwood CSS to make this process a little bit easier for you.
A brief About Tailwind CSS
Tailwind CSS adopts a utility-first approach rather than building a class for the component. Tailwind CSS is a utility-first approach that makes creating applications faster and easier
Tailwind CSS offers limited benefits but assures you the flexibility and power to create your unique site.
Talking Drupal: Talking Drupal #463 - Drupal vs DIY Site Builders
Today we are talking about DIY Site Builders, what are the benefits over Drupal (If Any), and When using Drupal makes sense with guest Ivan Stegic. We’ll also cover Drupal 11 as our module of the week.
For show notes visit: www.talkingDrupal.com/463
Topics- What is a DIY site builder
- Does TEN7 use DIY site builders
- How are DIY site builders better than Drupal
- Are they less expensive than Drupal
- HAve you ever suggested a site builder to a client
- What does a migration from a site builder look like
- Do you think starshot will make Drupal competitive with site builders
- Workspaces Extra
- Talking Drupal 451 - Just say Drupal
- Shopify
- Webflow
- Wix
- Squarespace
- Wordpress vip
- Cosmic.build
- Preshow:
Ivan Stegic - ten7.com ivanstegic
HostsNic Laflin - nLighteneddevelopment.com nicxvan John Picozzi - epam.com johnpicozzi Josh Miller - joshmiller
MOTW CorrespondentMartin Anderson-Clutz - mandclu.com mandclu
- Brief description:
- Have you been wanting a version of Drupal that can use Workspaces, Recipes, and Single Directory Components, while running all the latest versions of its underlying technologies? Drupal 11 is all of that and more
- Module name/project name:
- Brief history
- How old: created on Aug 2 by catch of Tag1 and Third & Grove
- Module features and usage
- Limited additions vs 10.3: by design to make the transition easier
- Mostly in the recipes API, e.g. new config actions
- Recap of new features vs. 10.0
- Workspaces
- Revisions and workflow are possible in the UI for Blocks and Taxonomy Terms
- UI updates for creating and reusing fields, as well as bulk content operations
- New Access Policy API and Single Directory Components
- New Navigation and Announcements Feed modules
- Contrib support out of the gate: about ⅔ of the top 200 modules already support Drupal 11
- Adding modules that Rector estimates will only need info.yml or automated fixes brings us to over 80% of the top 200, or about 75% of all Drupal 10-compatible projects on Drupal.org
- Updated dependencies: PHP 8.3, Symfony 7, CKEditor 5 42.0,2, Twig 3.9, Yarn 4, jQuery 4.0.0-beta, jQuery UI 1.14-beta.2 and more
- Modules moved to contrib (smaller core):
- Actions UI
- Activity Tracker
- Book
- Forum
- Statistics
- Tour
- Drupal 10 will receive maintenance support until mid-2026, so the community created this release of Drupal 11 early to give sites as much time as possible to make the transition, in this case almost 2 years!
- Limited additions vs 10.3: by design to make the transition easier
The Drop Times: Latest Breakthroughs in the Drupal Starshot Initiative
The Drop Times: Drupal GovCon 2024: The Heartbeat of the DC Drupal community
Golems GABB: Scaling and Performance Optimization of Drupal
The future is not distant anymore, so what kind of "good Drupal performance and scalability" can we expect in 2024? Moreover, what implementations can be done via Drupal's features and options to impress an online audience?
Nowadays, in the era of digital content, a website should be ultramodern in both presentation and performance. Consumers prefer easy experiences. Hence, the ability of an organization to do this for them is a critical factor in service delivery. Regarding the user side of the services, sites should hold up with rapid traffic growth, constantly upgrade, and provide users with a wide range of features.
Moreover, such a growing level of cross-communication may not only meet those expectations but also go far beyond them to help organizations grow in the digital domain.
The Drop Times: Which CMS Powers the Top US University Websites? A Comprehensive Analysis
Wim Leers: XB week 11: live updates
This week started with undoing the horrors that y’all were subjected to last week: TwoTerribleTextAreasWidget
featured prominently. The follow-up that I mentioned landed (Ben “bnjmnm” Mullins and I collaborated on it), which with a +110,-245
diff resulted in something that still is nowhere near a final UX, but is starting to look reasonable.
The evolved component instance props form: much simpler (it looked Frankensteinish a week ago!), by using the appropriate field widgets directly. Issue #3461422.
(Next up on that front: #3462310: Component props form: make form elements match design.)
That right sidebar is overlaid on top of the canvas, which also saw a big leap forward this week — thanks to Jesse “jessebaker” Baker, Harumi “hooroomoo” Jang, Ben “bnjmnm” Mullins and Lauri — a true team effort:
Component states in action: hover and active/focus. Issue #3460783, image by Jesse.
The images you saw last week showed actual component previews … but we cheated by using inline style
s :P.
This week, Ben rectified that: CSS/JS assets are now loaded inside the preview <iframe>
s.
But I saved the best for last: the last MR to land this week was Ben’s Redux integration issue … which brought with it: live updates of the component’s preview:
Live updating of component previews while the props are edited in the right sidebar! Issue #3462441, image by Ben.
This currently always requires a round trip to the server, but in many cases we’d actually be able to update the preview without a round trip (better for UX obviously!). See #3453690: [META] Real-time preview: supporting back-end infrastructure, where Lee “larowlan” Rowlands intends to work on parsing a Single-Directory Component’s Twig template into an Abstract syntax tree, which would allow eliminating that round trip in typical cases.1
I omitted less interesting MRs, but there’s one more issue that landed that deserves a mention: Ted “tedbow” Bowman and Ben landed CI: use a snapshot of core’s phpcs rules as changes in Drupal core will break MRs with limited benefit to module development, which was a very welcome addition: recently, Drupal 11 development has picked up steam … and hence several coding standards were added to Drupal core. Result: XBs phpcs
CI job started failing overnight, with zero changes on our end. Doing the right thing can be painful! So, Ted and Ben changed that so we’d be notified instead: far less disruptive.
In progress/where to contribute
- Experience Builder has some needs that Single-Directory Components has not had to fulfill. Lauri asked me to start developing a comprehensive plan for integrating XB with SDC: what are all the mismatches, the feature gaps, et cetera?
- Ted discovered that XB currently does not support propless SDCs — oops! This is a great first issue to contribute to XB!
- Lauri created #3463300: Implement the concept of sections within the client
- Lauri also created #3463307: Implement simplified zoom interface, which Gauravvvv quickly picked up!
- Ben created #3463610: VH units fix only works for inline styles, which seems another great first issue to contribute to XB, but this time on the front end.
- Finally, I created #3463957: “Publish” and “Share” buttons should convey they do not yet work, which was quickly picked up by fazilitehreem :)
P.S.: issues that were picked up by somebody do not exclude you from contributing too — as you can see above, almost every issue is a multi-person effort!
Missed a prior week? See all posts tagged Experience Builder.
Goal: make it possible to follow high-level progress by reading ~5 minutes/week. I hope this empowers more people to contribute when their unique skills can best be put to use!
For more detail, join the #experience-builder
Slack channel. Check out the pinned items at the top!
Week 11 was July 22–28, 2024.
-
If the SDC prop value is rendered as-is, with no transformations applied, then no round trip is necessary. Otherwise, that might be needed. ↩︎
Théodore 'nod_' Biadala: A Summer of Sponsored Drupal Contribution
Much like my last update things are going well. I am able to spend 2 full days every week on contribution and my commit activity has increased quite a lot. Many thanks to my sponsors: Palantir.net, OPTASY, and new ones who joined in the past few weeks: Vardot, OpenSense Labs, and Liip.ch.
Now some numbers, since the last update I committed 82 issues (worth 820 weighted issue credits), that’s about 33 issues per month (or 330 issue credits). That’s a few more issues per week than before. There is still room to increase the commit activity with more sponsors so don’t hesitate to check out how to sponsor my contribution in core.
- Navigation LayoutBuilder UI has dead click zone
- Update the Drupal logo in Drupal core with the 2024 brand evolution I like the new brand very much, it’s good to update the default icon
- Update documentation for table.html.twig around table cells
- Regression: The drawer in Safari is missing the drop shadow
- Update the Drupal logo on the project page
- Meeting notes: May 20th 2024 - Isomorphic rendering Meetings take time, I can now spend it more easily to keep updated and make sure everyone is aligned
- Remove JavaScript from Views configuration form now that it is only CSS Removing JS code because CSS is so good now is always nice
- Navigation overlay z-index is not defined
- Update stylelint rule unit-allowed-list to include container query units
- Navigation: Avoid layout builder form submit
- Tab highlights for current/hover/click are too high up when other tabs have 2 lines of text
- Mobile version of Navigation menu doesn’t properly reset Drupal.displace() on closing
- core.libraries.yml mis-implements moved_files syntax
- When configuring a field on a content type’s “manage display” tab the spinner shifts the label and format column
- #states not working correctly when built from a logical combination of multliple fields
- Responsive image width/height values are not used from fallback image style
- Custom Navigation logo is disconnected from new Layout template
- CKEditor 5 Styles dropdown broken when in off-canvas sidebar
- [drupalMedia] Ability to mark image media as “decorative”
- Refactor (if feasible) use of jquery parseHTML function to use vanillaJS removing jQuery one method at a time
- drupalInstallModule nightwatch function does not work with Experimental modules
- Prefer to use Array.prototype.includes() for some of Array.prototype.indexOf()
- Claro: Autocomplete dropdown bleeds through sticky table header
- Refactor Claro’s table–file-multiple-widget stylesheet
- “Single-Directory Components” needs to be hyphenated because of English grammar and content style rules
- Trigger a JavaScript deprecation error for dialogClass in forked dialog.js
- Update to jquery UI 1.14.0 beta 2 Bleeding edge of web development :)
- Implement Nightwatch tests for Navigation module
- Visually-hidden refresh button in Field UI fails WCAG Focus Visible.
- Olivero: Incorrect positioning of close button on mobile device when navigation module is enabled.
- The core/drupal.message library requires a status_messages render element
- The [0] hatch in misc/vertical-tabs.js causes issues if there are multiple forms with vertical tabs. One thing jQuery does well is handle uncertainty much better than vanilla JS, and removing jQuery exposes us to that kind of things
- Drupal core committers team meeting - Dev Days Burgas 2024
- Reorder checkboxes on “Development settings” page
- Secondary tabs design is distorted on block view page
- Drupal core committers meeting 2024-06-11
- Remove decoupled menus and media initiatives from MAINTAINERS
- Update Drupal’s default throbber icons Using svg instead of gifs, overdue
- Update loading icon and use SVG
- Layout shift on displays in views page
- Remove documentation for readmore, logged_in and is_admin from node.html.twig
- Remove legacy ‘metadata’ variable from node.html.twig
- Prevent simultaneous open/close on simultaneous click/hover Navigation still needs polish, this one helped quite a bit with regular use
- Long string breaks the layout of Claro (reapply fix)
- Spacing issue in Home > Search page on Advanced search section
- Autocomplete input text can visibly overflow under magnifier icon
- Refactor Claro’s tabledrag stylesheet
- Have a dedicated category for blocks provided by the Navigation module
- ToolbarStoredStateTest needs wait after resizing window
- The link on the Image tag is redirecting to an undefined page from the node preview screen
- clarify db settings for run-tests.sh example command
- Parameters doc for views “row” should be at the top level of the array
- Consolidate Umami performance tests
- Optimize TelephoneFieldTest
- hook_local_tasks_alter() and hook_menu_local_tasks_alter() need mutual @see links
- Update to ckeditor 42.0.2
- Consolidate methods on FormElementsLabelsTest
- Merge the build and lint stages in core MR pipelines Tests go faster
- Fix Field UI tests that rely on UID1’s super user behavior
- Single directory component CSS asset library not picked up in admin theme immediately after module install without cache clear
- Replace t() calls inside of Controllers that do not use StringTranslationTrait
- Render API overview should include a link to the list of elements
- Resync .gitlab-ci.yml and .gitignore following Yarn 4 in 11.x
- Merge test methods in FieldUIRouteTest for better performance
- Fix File tests that rely on UID1’s super user behavior
- Stop using a data provider in UserPasswordResetTest
- More efficient route lookup caching
- Update deprecation notices in ajax.js
- Consolidate ckeditor5’s FunctionalJavascript tests More test speed
- Drupal Displace outputs invalid value for --drupal-displace-offset-right when opening top dialog
- Subpixel rounding issue causes dialog to resize unnecessarily That one had a funky side effect when resizing the browser window. It’s gone now :)
- Document that Uuid::isValid() only considers lowercase UUIDs as valid
- Menu system docs section gives wrong alter hook
- standardize docs on how to use the 4 types of test base
- Update to jQuery UI 1.14.0
- Add example and sections to Block API documentation
- FileSystemInterface::copy documentation is inaccurate
- Use artifacts to share the eslint and styleint caches from core to MRs
- New throbber SVG images lack xmlns attribute
- Drupal core committers meeting 2024-08-05
- Drupal core committers meeting 2024-07-01
- Document the recommended ways to obtain the database connection object
There were too many to comment each one individually. Many issues on stabilizing the new navigation module, making core tests faster, and documentation.
If you’re interested in supporting my work on Drupal core and keep the frontend fixes coming, consider sponsoring me.