<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>DEV Community: Frederico Maia</title>
    <description>The latest articles on DEV Community by Frederico Maia (@fredmaiaarantes).</description>
    <link>https://dev.to/fredmaiaarantes</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F276035%2F93f07ab9-0bc3-424f-957c-1d6ba2019582.jpg</url>
      <title>DEV Community: Frederico Maia</title>
      <link>https://dev.to/fredmaiaarantes</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/fredmaiaarantes"/>
    <language>en</language>
    <item>
      <title>Big Changes at Meteor Software: Our Next Chapter</title>
      <dc:creator>Frederico Maia</dc:creator>
      <pubDate>Fri, 16 May 2025 17:02:54 +0000</pubDate>
      <link>https://dev.to/meteor/big-changes-at-meteor-software-our-next-chapter-g22</link>
      <guid>https://dev.to/meteor/big-changes-at-meteor-software-our-next-chapter-g22</guid>
      <description>&lt;p&gt;As the CEO of Meteor Software for the past 3 years, I wanted to share some major exciting things about where we're heading. When I first joined the company, I had a clear vision to modernize &lt;a href="https://meteor.com" rel="noopener noreferrer"&gt;Meteor&lt;/a&gt; and transform &lt;a href="https://galaxycloud.app" rel="noopener noreferrer"&gt;Galaxy&lt;/a&gt; into something bigger.&lt;/p&gt;

&lt;p&gt;Today, I'm excited to tell you that these changes are finally happening.&lt;/p&gt;

&lt;h2&gt;
  
  
  A New Era, A New Identity
&lt;/h2&gt;

&lt;p&gt;First things first! We're introducing fresh new brands for both Meteor and Galaxy. This isn't just a cosmetic facelift. It shows that we are changing our direction in a significant way.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F1vpkqadr6p0lqylh2zjc.webp" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F1vpkqadr6p0lqylh2zjc.webp" alt="Screenshot of the previous Meteor website" width="800" height="458"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fracmohm33tzswdgq4h89.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fracmohm33tzswdgq4h89.png" alt="Screenshot of the new Meteor website" width="800" height="405"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;We've been using the original Meteor logo for more than 13 years, and it has become quite recognizable within the JavaScript community. The decision to change it wasn't made hastily, but we felt it was essential to reflect our ongoing evolution.&lt;/p&gt;

&lt;p&gt;Our new Meteor brand represents our commitment to modern JavaScript. It features a cleaner, more contemporary design that represents our future direction rather than just our heritage. The redesigned &lt;a href="https://meteor.com" rel="noopener noreferrer"&gt;Meteor website&lt;/a&gt; is now ready and includes a really cool interactive demo that showcases what Meteor can do. We're excited for you to check it out and experience Meteor's capabilities firsthand.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fgp2g0jjynfchhv47wpu1.webp" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fgp2g0jjynfchhv47wpu1.webp" alt="Screenshot of the previous Galaxy website" width="800" height="457"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fqhpk2h8bdonsmz7sdpet.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fqhpk2h8bdonsmz7sdpet.png" alt="Screenshot of the new Galaxy website" width="800" height="455"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Meanwhile, Galaxy's new independent brand shows it's growing beyond its Meteor-only roots into a robust, multi-stack cloud platform.&lt;/p&gt;

&lt;h2&gt;
  
  
  Meteor 3: Embracing the Node.js Ecosystem
&lt;/h2&gt;

&lt;p&gt;After countless long nights and coffee-fueled coding sessions, we released Meteor 3.0 in July 2024 (now we're at version 3.2). This release wasn't just another version bump. It shows where we want to go in the future. We changed from using Fibers to using async/await, which is what most developers use now. We also support the newest version of Node.js. These changes help Meteor work better with other Node.js tools.&lt;/p&gt;

&lt;p&gt;This is important because instead of maintaining our own solutions for everything, we're now able to use the best tools the JavaScript ecosystem has to offer. Why reinvent the wheel when there are already amazing solutions out there? Since I started working at Meteor Software, I wanted Meteor to work well with other Node.js tools instead of being separate and alone.&lt;/p&gt;

&lt;h3&gt;
  
  
  What's Coming in 2025
&lt;/h3&gt;

&lt;p&gt;Looking ahead, our &lt;a href="https://docs.meteor.com/about/roadmap.html" rel="noopener noreferrer"&gt;2025 roadmap&lt;/a&gt; shows exactly where we're heading. We're embracing integration with powerful, proven tools instead of making everything ourselves.&lt;/p&gt;

&lt;h4&gt;
  
  
  Bundle Optimization: Our Current Priority
&lt;/h4&gt;

&lt;p&gt;We're working to make Meteor apps smaller and faster:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Working with modern bundlers:&lt;/strong&gt; We're making it easy to use RSPack, ESBuild, and Rollup so your apps will load faster and use less memory&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Faster builds:&lt;/strong&gt; With our new tools (added in version 3.2), we're making builds take less time&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Better development experience:&lt;/strong&gt; Making changes to your code will show up more quickly while you're developing&lt;/li&gt;
&lt;/ul&gt;

&lt;h4&gt;
  
  
  Other Important Improvements
&lt;/h4&gt;

&lt;p&gt;We are also going to work on:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Modernized RPC Methods and Publications:&lt;/strong&gt; Adding self-documenting code, better validation, and more intuitive interfaces while maintaining backward compatibility&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;MongoDB Change Streams:&lt;/strong&gt; Using the official way to get real-time updates from MongoDB&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Better TypeScript support:&lt;/strong&gt; Making it easier to use TypeScript with Meteor and its packages&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;CapacitorJS for mobile apps:&lt;/strong&gt; A better, newer way to build mobile apps than our old Cordova system&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Faster releases:&lt;/strong&gt; Making our own process quicker so you get updates sooner&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;All these changes will solve real problems that developers face every day.&lt;/p&gt;

&lt;p&gt;We will write clear, helpful guides about all these new features so everyone can use them easily, whether you're new to Meteor or have used it for years.&lt;/p&gt;

&lt;h2&gt;
  
  
  Galaxy Expands Its Universe
&lt;/h2&gt;

&lt;p&gt;I'm particularly excited to share what is perhaps our most significant announcement. Galaxy is undergoing a comprehensive transformation. Upon joining the company, I recognized Galaxy's potential to evolve beyond its role as a Meteor-only hosting platform. Today, I'm pleased to announce that we're realizing this ambitious vision.&lt;/p&gt;

&lt;p&gt;Galaxy 2.0 integrates our previous dashboard and backend systems into a cohesive, intuitive platform that significantly enhances the user experience. The truly revolutionary aspect, however, is Galaxy's expanded support capabilities. &lt;strong&gt;The platform now supports Node.js and Python applications, including frameworks such as Express, Nest, Adonis, Flask, and Django.&lt;/strong&gt; And we're developing support for Ruby on Rails, which will be available in the coming months.&lt;/p&gt;

&lt;p&gt;Our promise is simple but powerful. We'll provide the most user-friendly cloud platform and the most responsive support team available. We believe cloud hosting shouldn't be complicated, and when you need help, you deserve proper answers from people who understand your challenges.&lt;/p&gt;

&lt;h3&gt;
  
  
  Complete Platform with Database Solutions
&lt;/h3&gt;

&lt;p&gt;In 2024, we enhanced Galaxy by adding MongoDB hosting directly on the platform. This significantly simplified deployments for teams needing reliable, managed MongoDB solutions. We're continuing this evolution in 2025 by expanding our database offerings to include PostgreSQL, Redis, and FerretDB.&lt;/p&gt;

&lt;p&gt;These additions transform Galaxy into a comprehensive platform for hosting applications and databases together, streamlining deployment and management considerably.&lt;/p&gt;

&lt;p&gt;This isn't just an upgrade. It's a complete transformation. Galaxy now operates as an independent platform with its own &lt;a href="https://galaxycloud.app" rel="noopener noreferrer"&gt;dedicated website&lt;/a&gt; and distinct brand identity separate from Meteor. The new Galaxy brand reflects our commitment to serving a wider developer community while maintaining the reliability our users expect. We're making a substantial investment in this expansion for 2025.&lt;/p&gt;

&lt;h2&gt;
  
  
  Our Team Structure
&lt;/h2&gt;

&lt;p&gt;I want to be transparent about our organization. These advancements are being delivered by dedicated, autonomous teams working diligently behind the scenes.&lt;/p&gt;

&lt;p&gt;We operate with two specialized technical teams, each led by its own tech lead while sharing the same CTO. The teams maintain separate roadmaps and priorities, focusing exclusively on their respective products. The Galaxy team advances our cloud platform, while the Meteor team enhances and maintains our open-source framework. Our DevOps specialists, though formally part of the Galaxy team, provide support to both divisions when infrastructure requirements arise.&lt;/p&gt;

&lt;p&gt;This organizational approach ensures consistent attention to both products, with Meteor and Galaxy each receiving the focused development they require.&lt;/p&gt;

&lt;h2&gt;
  
  
  Why These Changes Matter
&lt;/h2&gt;

&lt;p&gt;I won't present you with buzzwords or empty promises. As developers ourselves, we understand what's truly important: reliable tools that enhance productivity and effectiveness. These changes address genuine requirements:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;&lt;p&gt;Meteor requires improvements on DX, scaling, and compatibility with modern JavaScript&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Galaxy needed to support additional technologies because that's what teams actually use in the real world&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Both products needed to communicate their evolution with new, modern brand identities&lt;/p&gt;&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;The refreshed branding for Meteor and Galaxy isn't merely cosmetic. These are deliberate declarations of our direction. They demonstrate our dedication to innovation and our readiness to meet current development demands. The real improvements are in the technology and its capabilities. We're committed to developing robust, practical solutions for real-world development challenges.&lt;/p&gt;

&lt;h2&gt;
  
  
  Try It Today
&lt;/h2&gt;

&lt;p&gt;If you're a Meteor developer, I encourage you to upgrade to Meteor 3 today. You'll immediately feel the benefits of native async/await and modern Node.js features. Meteor 3.3, which &lt;a href="https://forums.meteor.com/t/weekly-update-may-16-2025-new-3-3-beta-1-release-faster-builds-delivered/63612" rel="noopener noreferrer"&gt;is currently in beta&lt;/a&gt;, already brings faster builds. Check out &lt;a href="https://docs.meteor.com" rel="noopener noreferrer"&gt;Meteor 3 docs&lt;/a&gt;.&lt;/p&gt;

&lt;p&gt;For those working with Node.js, Python, and their popular frameworks, consider exploring Galaxy. Visit our &lt;a href="https://galaxycloud.app" rel="noopener noreferrer"&gt;new Galaxy website&lt;/a&gt; to discover how we've simplified cloud deployment.&lt;/p&gt;

&lt;p&gt;I'm really proud of what our teams have built, but we're just getting started. There's so much more coming down the pipeline, and we'll keep you updated as we roll out new features.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Let's build amazing things together.&lt;/strong&gt;&lt;/p&gt;

</description>
      <category>webdev</category>
      <category>node</category>
      <category>meteor</category>
      <category>python</category>
    </item>
    <item>
      <title>Galaxy Meets Monti APM - Build Fast and Error-Free Meteor Apps</title>
      <dc:creator>Frederico Maia</dc:creator>
      <pubDate>Thu, 16 May 2024 15:06:29 +0000</pubDate>
      <link>https://dev.to/meteor/galaxy-meets-monti-apm-build-fast-and-error-free-meteor-apps-4h15</link>
      <guid>https://dev.to/meteor/galaxy-meets-monti-apm-build-fast-and-error-free-meteor-apps-4h15</guid>
      <description>&lt;p&gt;For developers immersed in MeteorJS, the story of Application Performance Monitoring (APM) tools reflects innovation, change, and growth led by the community.&lt;/p&gt;

&lt;h2&gt;
  
  
  Table of contents:
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;A Quick Look Back&lt;/li&gt;
&lt;li&gt;Launch Week - Day 4&lt;/li&gt;
&lt;li&gt;Why transitioning from Meteor APM to Monti APM?
&lt;/li&gt;
&lt;li&gt;Enter Monti APM&lt;/li&gt;
&lt;li&gt;How do you get access?&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  A Quick Look Back
&lt;/h2&gt;

&lt;p&gt;A key moment in this story was when Arunoda created Kadira, the first APM made just for Meteor. This was a big deal because it helped developers find and fix slow parts in their Meteor apps. Seeing its importance, when Kadira APM was shut down, MDG bought Kadira APM, renaming it Meteor APM and integrating it into Galaxy. They also made the Kadira APM code available to everyone. This move gave developers deep insights into their apps, covering everything from methods and publications to the complete lifecycle, significantly improving the Meteor ecosystem.&lt;/p&gt;

&lt;h2&gt;
  
  
  Launch Week - Day 4
&lt;/h2&gt;

&lt;p&gt;We're excited to announce the &lt;strong&gt;transition from Meteor APM to Monti APM&lt;/strong&gt;, aiming to provide our developers with even more powerful tools. This change comes as part of our commitment to continuously enhance the development experience within the MeteorJS ecosystem.&lt;/p&gt;

&lt;h2&gt;
  
  
  Why transitioning from Meteor APM to Monti APM?
&lt;/h2&gt;

&lt;p&gt;Over the past few years, Meteor APM has seen a period of stability rather than rapid evolution in terms of new features. Meteor APM continues to serve as a crucial tool for developers in monitoring and diagnosing performance issues within their Meteor applications. We have focused on maintaining the reliability and functionality of Meteor APM, ensuring that it remains operational and continues to provide value to the community. This work is crucial, as it ensures that existing features remain useful and that the tool keeps pace with the latest Meteor framework updates.&lt;/p&gt;

&lt;p&gt;However, in terms of introducing new features and capabilities, we couldn’t make significant advancements. While maintaining Meteor APM is vital for existing users to ensure stability and reliability, the dynamic and ever-evolving nature of software development demands continuous innovation to address new performance monitoring challenges and opportunities.&lt;/p&gt;

&lt;p&gt;In contrast, Monti APM has taken a path of active development and feature expansion. &lt;/p&gt;

&lt;h2&gt;
  
  
  Enter Monti APM
&lt;/h2&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F7cepfnlfqp8npcnemvdx.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F7cepfnlfqp8npcnemvdx.png" alt="Image description" width="800" height="452"&gt;&lt;/a&gt;&lt;br&gt;
Monti APM, picking up where Kadira APM left off, has continued to deliver that same level of insight and support but with added features and enhancements. Led by Micaiah (aka Zodern), Monti APM is dedicated to providing an APM solution that’s finely tuned for the needs of today’s Meteor applications.&lt;/p&gt;

&lt;p&gt;Monti APM has emerged as a robust alternative by adding an array of new features and improvements tailored to modern development practices. Some of the notable features include:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;CPU Profiling:&lt;/strong&gt; Dive into your app’s CPU usage to find and fix heavy-load functions, making your app run smoother and faster.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Error Insights:&lt;/strong&gt; Get a clearer picture of errors, spotting trends and issues that need your attention to boost your app’s quality.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Custom Alerts:&lt;/strong&gt; Stay on top of potential problems with alerts tailored to specific metrics. Use Slack notifications and Webhooks for real-time updates.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;System Dashboard:&lt;/strong&gt; A comprehensive view of your Node.js servers, offering an inside look at what’s happening under the hood.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;API:&lt;/strong&gt; Access collected data through a GraphQL API for custom dashboards, integrations, or unique data exploration.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Learn more about how to use these features by visiting &lt;a href="https://docs.montiapm.com/" rel="noopener noreferrer"&gt;Monti APM’s documentation&lt;/a&gt;.&lt;/p&gt;

&lt;h2&gt;
  
  
  Transitioning to Monti APM
&lt;/h2&gt;

&lt;p&gt;Our team is working to promote a smooth switch from Meteor APM to Monti APM. This change shows our dedication to giving Meteor developers the best tools out there.&lt;/p&gt;

&lt;h3&gt;
  
  
  How do you get access?
&lt;/h3&gt;

&lt;p&gt;When the feature is ready, hopefully, by the end of this month, we'll let everyone know through email and social media. Just like now, if you have the Professional plan, you can use Meteor APM; you'll also be able to use Monti APM. The setup will be easy, and you can manage your app with Monti APM by clicking a link in Galaxy 2.0.&lt;/p&gt;

&lt;p&gt;Moving to Monti APM isn't just an upgrade; it's a step forward for all of us in the Meteor community who aim for innovation and excellence. Stay tuned for updates as we roll out Monti APM. Together, we can make our Meteor applications stronger, faster, and error-free.&lt;/p&gt;

</description>
      <category>meteor</category>
      <category>galaxy</category>
    </item>
    <item>
      <title>Meteor.js with Vite, Solid, and Tailwind CSS</title>
      <dc:creator>Frederico Maia</dc:creator>
      <pubDate>Wed, 10 May 2023 14:55:04 +0000</pubDate>
      <link>https://dev.to/fredmaiaarantes/meteorjs-with-vite-solid-and-tailwind-css-5d2o</link>
      <guid>https://dev.to/fredmaiaarantes/meteorjs-with-vite-solid-and-tailwind-css-5d2o</guid>
      <description>&lt;p&gt;In the world of web development, choosing the right tools can make a significant difference in the efficiency and quality of your projects. In this blog post, we will learn how to create a new project using four powerful tools: Meteor.js, Vite, Solid, and Tailwind CSS. This combination can elevate our development experience.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fkxnc73l1sd5yoyorui49.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fkxnc73l1sd5yoyorui49.png" alt="Meteor.js with Vite, Solid, and Tailwind CSS" width="800" height="450"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://meteor.com/" rel="noopener noreferrer"&gt;Meteor.js&lt;/a&gt; is a full-stack platform that simplifies the development of web applications by providing a unified approach to building both the front-end and back-end. With real-time data updates, Meteor.js speeds up the development process and ensures you can create powerful applications.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://vitejs.dev/" rel="noopener noreferrer"&gt;Vite&lt;/a&gt; is a next-generation build tool that significantly enhances development. Integrating Vite with Meteor.js and Solid can further boost development efficiency and application performance.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://www.solidjs.com/" rel="noopener noreferrer"&gt;Solid&lt;/a&gt; is a unique JavaScript library designed for creating user interfaces more efficiently. Rather than using a Virtual DOM like many other frameworks, Solid compiles its templates to real DOM nodes and updates them with precise reactions.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://tailwindcss.com/" rel="noopener noreferrer"&gt;Tailwind CSS&lt;/a&gt; is a utility-first CSS framework that enables developers to quickly design responsive, modern websites and applications without writing repetitive CSS code. By providing a set of predefined utility classes, Tailwind CSS streamlines the styling process, allowing you to focus on the overall layout and design.&lt;/p&gt;

&lt;p&gt;When combined, Meteor.js, Vite, Solid, and Tailwind CSS create a powerful synergy that can dramatically enhance your web development experience.&lt;/p&gt;

&lt;h4&gt;
  
  
  Before diving into the tutorial, you should know that it's possible to quickly generate a Meteor.js + Vite + Solid app using the following command:
&lt;/h4&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;meteor create meteor-solid-app &lt;span class="nt"&gt;--solid&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h4&gt;
  
  
  However, in this tutorial, we'll guide you through each step to provide a deeper understanding of the process.
&lt;/h4&gt;

&lt;h2&gt;
  
  
  Create your Meteor.js project
&lt;/h2&gt;

&lt;p&gt;Start by creating a new &lt;a href="https://meteor.com/" rel="noopener noreferrer"&gt;Meteor&lt;/a&gt; project using the &lt;code&gt;--minimal&lt;/code&gt; flag. If you don't have Meteor.js installed yet, follow our &lt;a href="https://docs.meteor.com/install.html" rel="noopener noreferrer"&gt;instructions here&lt;/a&gt;. This option generates a project with the minimum required Meteor packages. Upon creation, a subdirectory with the same name is also created. Please navigate to the project folder and run it to ensure the proper setup.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;meteor create meteor-solid-app &lt;span class="nt"&gt;--minimal&lt;/span&gt;
&lt;span class="nb"&gt;cd &lt;/span&gt;meteor-solid-app
meteor npm start
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;You should see a simple app as below:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fj7jast2eug2wtq144ts7.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fj7jast2eug2wtq144ts7.png" alt="Minimal Meteor app screenshot" width="800" height="498"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;To use the most recent dependencies, review your package.json file and update your dependencies accordingly:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="p"&gt;...&lt;/span&gt;
&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;dependencies&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;@babel/runtime&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;^7.21.5&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
  &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;meteor-node-stubs&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;^1.2.5&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;
&lt;span class="p"&gt;},&lt;/span&gt;
&lt;span class="p"&gt;...&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Run &lt;code&gt;meteor npm i&lt;/code&gt; to install the newly added dependencies above.&lt;/p&gt;

&lt;h2&gt;
  
  
  Install Vite and Solid
&lt;/h2&gt;

&lt;p&gt;Execute the commands below to install Vite and Solid:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;meteor add vite:bundler
meteor npm i &lt;span class="nt"&gt;-D&lt;/span&gt; vite vite-plugin-solid
meteor npm i solid-js
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Create a Vite configuration file (&lt;code&gt;vite.config.js&lt;/code&gt;) in your project root and import the Solid plugin. Since we are not using a standard Vite &lt;code&gt;index.html&lt;/code&gt; file, specify an entry point to a new file that will be created inside the &lt;code&gt;ui&lt;/code&gt; folder called &lt;code&gt;main.jsx&lt;/code&gt;:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nx"&gt;defineConfig&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="k"&gt;from&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;vite&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;
&lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="nx"&gt;solidPlugin&lt;/span&gt; &lt;span class="k"&gt;from&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;vite-plugin-solid&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

&lt;span class="k"&gt;export&lt;/span&gt; &lt;span class="k"&gt;default&lt;/span&gt; &lt;span class="nf"&gt;defineConfig&lt;/span&gt;&lt;span class="p"&gt;({&lt;/span&gt;
  &lt;span class="na"&gt;plugins&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="p"&gt;[&lt;/span&gt;
    &lt;span class="nf"&gt;solidPlugin&lt;/span&gt;&lt;span class="p"&gt;(),&lt;/span&gt;
  &lt;span class="p"&gt;],&lt;/span&gt;
  &lt;span class="na"&gt;meteor&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="na"&gt;clientEntry&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;ui/main.jsx&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
  &lt;span class="p"&gt;},&lt;/span&gt;
&lt;span class="p"&gt;})&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Write your code from this entry point, and let Vite handle it! ⚡️&lt;/p&gt;

&lt;h2&gt;
  
  
  Create the entry point
&lt;/h2&gt;

&lt;p&gt;Create the &lt;code&gt;ui&lt;/code&gt; folder and the file &lt;code&gt;ui/main.jsx&lt;/code&gt; with the following content:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight jsx"&gt;&lt;code&gt;&lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nx"&gt;render&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="k"&gt;from&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;solid-js/web&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nx"&gt;Meteor&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="k"&gt;from&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;meteor/meteor&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nx"&gt;App&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="k"&gt;from&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;./App&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

&lt;span class="nx"&gt;Meteor&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;startup&lt;/span&gt;&lt;span class="p"&gt;(()&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="nf"&gt;render&lt;/span&gt;&lt;span class="p"&gt;(()&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nc"&gt;App&lt;/span&gt;&lt;span class="p"&gt;/&amp;gt;,&lt;/span&gt; &lt;span class="nb"&gt;document&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;getElementById&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;root&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;));&lt;/span&gt;
&lt;span class="p"&gt;});&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;We will create the App component later. Now, replace the contents of &lt;code&gt;client/main.html&lt;/code&gt; with:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight jsx"&gt;&lt;code&gt;&lt;span class="p"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nt"&gt;head&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;&lt;/span&gt;
    &lt;span class="p"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nt"&gt;title&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;&lt;/span&gt;Meteor.js with Vite, Solid, and Tailwind CSS&lt;span class="p"&gt;&amp;lt;/&lt;/span&gt;&lt;span class="nt"&gt;title&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;&lt;/span&gt;
&lt;span class="p"&gt;&amp;lt;/&lt;/span&gt;&lt;span class="nt"&gt;head&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;&lt;/span&gt;
&lt;span class="p"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nt"&gt;body&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;&lt;/span&gt;
 &lt;span class="p"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nt"&gt;noscript&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;&lt;/span&gt;You need to enable JavaScript to run this app.&lt;span class="p"&gt;&amp;lt;/&lt;/span&gt;&lt;span class="nt"&gt;noscript&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;&lt;/span&gt;
 &lt;span class="p"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nt"&gt;div&lt;/span&gt; &lt;span class="na"&gt;id&lt;/span&gt;&lt;span class="p"&gt;=&lt;/span&gt;&lt;span class="s"&gt;"root"&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;&amp;lt;/&lt;/span&gt;&lt;span class="nt"&gt;div&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;&lt;/span&gt;
&lt;span class="p"&gt;&amp;lt;/&lt;/span&gt;&lt;span class="nt"&gt;body&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Delete the content from &lt;code&gt;client/main.js&lt;/code&gt; and add a comment as follows:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight jsx"&gt;&lt;code&gt;    &lt;span class="c1"&gt;// The main entry point for the app can be found in ui/main.jsx.&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  Install and Configure Tailwind CSS
&lt;/h2&gt;

&lt;p&gt;Install &lt;code&gt;tailwindcss&lt;/code&gt; and its peer dependencies via npm, then run the &lt;code&gt;init&lt;/code&gt; command to generate both &lt;code&gt;tailwind.config.js&lt;/code&gt; and &lt;code&gt;postcss.config.js&lt;/code&gt;.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;meteor npm i &lt;span class="nt"&gt;-D&lt;/span&gt; tailwindcss postcss autoprefixer
meteor npx tailwindcss init &lt;span class="nt"&gt;-p&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;In your &lt;code&gt;tailwind.config.js&lt;/code&gt; file, add the paths to all of your template files:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="cm"&gt;/** @type {import('tailwindcss').Config} */&lt;/span&gt;
&lt;span class="nx"&gt;module&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;exports&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="na"&gt;content&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;./ui/**/*.{js,jsx,ts,tsx}&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;],&lt;/span&gt;
  &lt;span class="na"&gt;theme&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="na"&gt;extend&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="p"&gt;{},&lt;/span&gt;
  &lt;span class="p"&gt;},&lt;/span&gt;
  &lt;span class="na"&gt;plugins&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="p"&gt;[],&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Include the Tailwind directives in your &lt;code&gt;client/main.css&lt;/code&gt; file:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight css"&gt;&lt;code&gt;&lt;span class="k"&gt;@tailwind&lt;/span&gt; &lt;span class="n"&gt;base&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="k"&gt;@tailwind&lt;/span&gt; &lt;span class="n"&gt;components&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="k"&gt;@tailwind&lt;/span&gt; &lt;span class="n"&gt;utilities&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  Create Your First Solid Component
&lt;/h2&gt;

&lt;p&gt;Create the file &lt;code&gt;ui/App.jsx&lt;/code&gt; with the following content:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight jsx"&gt;&lt;code&gt;&lt;span class="k"&gt;export&lt;/span&gt; &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;App&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;
  &lt;span class="p"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nt"&gt;div&lt;/span&gt; &lt;span class="na"&gt;className&lt;/span&gt;&lt;span class="p"&gt;=&lt;/span&gt;&lt;span class="s"&gt;"p-4"&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;&lt;/span&gt;
    &lt;span class="p"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nt"&gt;h1&lt;/span&gt; &lt;span class="na"&gt;className&lt;/span&gt;&lt;span class="p"&gt;=&lt;/span&gt;&lt;span class="s"&gt;"text-3xl font-bold text-indigo-800"&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;&lt;/span&gt;
      Meteor + Solid + Tailwind
    &lt;span class="p"&gt;&amp;lt;/&lt;/span&gt;&lt;span class="nt"&gt;h1&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;&lt;/span&gt;
  &lt;span class="p"&gt;&amp;lt;/&lt;/span&gt;&lt;span class="nt"&gt;div&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;&lt;/span&gt;
&lt;span class="p"&gt;);&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;From the app folder, run the &lt;code&gt;meteor npm start&lt;/code&gt; command to launch your app. You should see a simple heading with an indigo color.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F9czpzg48122yxjyjm2n0.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F9czpzg48122yxjyjm2n0.png" alt="Screenshot of the app with the title " width="734" height="483"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  Using Signals
&lt;/h2&gt;

&lt;p&gt;Signals are the foundation of reactivity in Solid. They contain values that change over time; when you update a signal's value, anything that uses it is automatically updated.&lt;/p&gt;

&lt;p&gt;To create a signal, import &lt;code&gt;createSignal&lt;/code&gt; from &lt;code&gt;solid-js&lt;/code&gt; and call it from your App component. Additionally, create an &lt;code&gt;increment&lt;/code&gt; function that will be called when a user clicks a button.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight jsx"&gt;&lt;code&gt;&lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nx"&gt;createSignal&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="k"&gt;from&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;solid-js&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

&lt;span class="k"&gt;export&lt;/span&gt; &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;App&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="nx"&gt;counter&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;setCounter&lt;/span&gt;&lt;span class="p"&gt;]&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nf"&gt;createSignal&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="mi"&gt;0&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
  &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;increment&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="nf"&gt;setCounter&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nf"&gt;counter&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="o"&gt;+&lt;/span&gt; &lt;span class="mi"&gt;1&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
  &lt;span class="p"&gt;};&lt;/span&gt;
 &lt;span class="p"&gt;...&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Enhance your component to display the counter on the screen and include a button to increment the counter. Your complete App component should resemble the following:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight jsx"&gt;&lt;code&gt;&lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nx"&gt;createSignal&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="k"&gt;from&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;solid-js&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

&lt;span class="k"&gt;export&lt;/span&gt; &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;App&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="nx"&gt;counter&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;setCounter&lt;/span&gt;&lt;span class="p"&gt;]&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nf"&gt;createSignal&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="mi"&gt;0&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;

  &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;increment&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="nf"&gt;setCounter&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nf"&gt;counter&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="o"&gt;+&lt;/span&gt; &lt;span class="mi"&gt;1&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
  &lt;span class="p"&gt;};&lt;/span&gt;

  &lt;span class="k"&gt;return &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;
   &lt;span class="p"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nt"&gt;div&lt;/span&gt; &lt;span class="na"&gt;className&lt;/span&gt;&lt;span class="p"&gt;=&lt;/span&gt;&lt;span class="s"&gt;"p-4"&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;&lt;/span&gt;
    &lt;span class="p"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nt"&gt;header&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;&lt;/span&gt;
      &lt;span class="p"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nt"&gt;h1&lt;/span&gt; &lt;span class="na"&gt;className&lt;/span&gt;&lt;span class="p"&gt;=&lt;/span&gt;&lt;span class="s"&gt;"text-3xl font-bold text-indigo-800"&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;&lt;/span&gt;
        Meteor + Solid + Tailwind
      &lt;span class="p"&gt;&amp;lt;/&lt;/span&gt;&lt;span class="nt"&gt;h1&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;&lt;/span&gt;
    &lt;span class="p"&gt;&amp;lt;/&lt;/span&gt;&lt;span class="nt"&gt;header&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;&lt;/span&gt;
    &lt;span class="p"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nt"&gt;section&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;&lt;/span&gt;
      &lt;span class="p"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nt"&gt;p&lt;/span&gt; &lt;span class="na"&gt;className&lt;/span&gt;&lt;span class="p"&gt;=&lt;/span&gt;&lt;span class="s"&gt;"py-4 font-semibold"&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;&lt;/span&gt;You've pressed the button &lt;span class="si"&gt;{&lt;/span&gt;&lt;span class="nf"&gt;counter&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt;&lt;span class="si"&gt;}&lt;/span&gt; times.&lt;span class="p"&gt;&amp;lt;/&lt;/span&gt;&lt;span class="nt"&gt;p&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;&lt;/span&gt;
      &lt;span class="p"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nt"&gt;button&lt;/span&gt;
        &lt;span class="na"&gt;onClick&lt;/span&gt;&lt;span class="p"&gt;=&lt;/span&gt;&lt;span class="si"&gt;{&lt;/span&gt;&lt;span class="nx"&gt;increment&lt;/span&gt;&lt;span class="si"&gt;}&lt;/span&gt;
        &lt;span class="na"&gt;type&lt;/span&gt;&lt;span class="p"&gt;=&lt;/span&gt;&lt;span class="s"&gt;"button"&lt;/span&gt;
        &lt;span class="na"&gt;className&lt;/span&gt;&lt;span class="p"&gt;=&lt;/span&gt;&lt;span class="s"&gt;"rounded bg-indigo-800 px-2 py-1 text-sm text-white"&lt;/span&gt;
      &lt;span class="p"&gt;&amp;gt;&lt;/span&gt;
        Click Me
      &lt;span class="p"&gt;&amp;lt;/&lt;/span&gt;&lt;span class="nt"&gt;button&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;&lt;/span&gt;
    &lt;span class="p"&gt;&amp;lt;/&lt;/span&gt;&lt;span class="nt"&gt;section&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;&lt;/span&gt;
   &lt;span class="p"&gt;&amp;lt;/&lt;/span&gt;&lt;span class="nt"&gt;div&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;&lt;/span&gt;
  &lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Great! From the app folder, run &lt;code&gt;meteor npm start&lt;/code&gt; to launch your app.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fwjw1ul7ydhr2h9ag84tc.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fwjw1ul7ydhr2h9ag84tc.gif" alt="Animated Gif clicking on the button" width="513" height="399"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  Deploy Your App and Share with Friends
&lt;/h2&gt;

&lt;p&gt;Create a Meteor Cloud account by using &lt;a href="https://cloud.meteor.com/?isSignUp=true" rel="noopener noreferrer"&gt;this URL&lt;/a&gt;, log in from your terminal, and execute the command below to deploy it for free:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;meteor login
meteor deploy meteorsolidapp.meteorapp.com &lt;span class="nt"&gt;--free&lt;/span&gt; &lt;span class="nt"&gt;--mongo&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;You could also create a Git repository with your project and deploy it from there. Learn how to do it by &lt;a href="https://cloud-guide.meteor.com/deploy-to-galaxy.html" rel="noopener noreferrer"&gt;reading our guide&lt;/a&gt;.&lt;/p&gt;

&lt;p&gt;By using a &lt;code&gt;meteorapp.com&lt;/code&gt; domain, there's no need to register one just for testing your app. The &lt;code&gt;--free --mongo&lt;/code&gt; flags deploy an app using &lt;a href="https://webflow.meteor.com/cloud#pricing-section" rel="noopener noreferrer"&gt;our free plan&lt;/a&gt;, including MongoDB.&lt;/p&gt;

&lt;p&gt;Keep in mind that the subdomain &lt;a href="https://meteorsolidapp.meteorapp.com" rel="noopener noreferrer"&gt;meteorsolidapp.meteorapp.com&lt;/a&gt; is already in use, so you'll need to choose a different one for your app. Now, please share it with your dev friends!&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;Enjoy exploring the complete source code for this tutorial on &lt;a href="https://github.com/fredmaiaarantes/meteor-solid-app" rel="noopener noreferrer"&gt;this GitHub repository&lt;/a&gt;. If the code has changed since the time of this post, you can always refer to &lt;a href="https://github.com/fredmaiaarantes/meteor-solid-app/tree/milestone-1.0" rel="noopener noreferrer"&gt;this specific release&lt;/a&gt; for the original version.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;h3&gt;
  
  
  Conclusion
&lt;/h3&gt;

&lt;p&gt;In this blog post, we walk you through creating a Meteor project with Solid, Vite, and Tailwind CSS. We cover setting up the appropriate configuration and making your first Solid app.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Let us know if you would like to see part 2 of this blog post, showing how to connect subscriptions and methods from Meteor to Solid.&lt;/strong&gt; Remember that you can already see an example app by generating it from the command line using the &lt;code&gt;--solid&lt;/code&gt; flag.&lt;/p&gt;

&lt;p&gt;Feel free to share your feedback or ask questions in the comments below. Happy coding!&lt;/p&gt;

</description>
      <category>meteor</category>
      <category>solidjs</category>
      <category>vite</category>
      <category>tailwindcss</category>
    </item>
    <item>
      <title>Instalando Tailwind CSS 2 em um projeto Meteor 2.6</title>
      <dc:creator>Frederico Maia</dc:creator>
      <pubDate>Wed, 10 Nov 2021 00:05:06 +0000</pubDate>
      <link>https://dev.to/fredmaiaarantes/instalando-tailwind-css-em-um-projeto-meteor-gl4</link>
      <guid>https://dev.to/fredmaiaarantes/instalando-tailwind-css-em-um-projeto-meteor-gl4</guid>
      <description>&lt;p&gt;&lt;a href="https://dev.to/fredmaiaarantes/installing-tailwind-in-a-meteor-project-2b6h"&gt;English version&lt;/a&gt;.&lt;/p&gt;

&lt;p&gt;Atualização: este tutorial é para o Meteor 2.6 e versões anteriores. Meteor agora tem suporte ao Tailwind 3, você pode seguir este post mais recente &lt;a href="https://blog.meteor.com/meteor-js-with-react-and-tailwind-css-3-3e878645451e" rel="noopener noreferrer"&gt;Meteor.js with React and Tailwind CSS 3&lt;/a&gt;.&lt;/p&gt;




&lt;p&gt;Meteor é um framework JS super produtivo que nos permite implementar funcionalidades tanto no backend quanto no frontend. Tailwind é um framework CSS para construirmos websites e apps modernos. A combinação dos dois nos dá um excelente combo!&lt;/p&gt;

&lt;p&gt;O Tailwind CSS tem algumas particularidades na hora de fazer o build e parse das nossas páginas, por isso precisamos de alguns passos para integrá-los.&lt;/p&gt;

&lt;h2&gt;
  
  
  Criando seu projeto
&lt;/h2&gt;

&lt;p&gt;Inicie criando um novo projeto &lt;a href="https://meteor.com" rel="noopener noreferrer"&gt;Meteor&lt;/a&gt; se você ainda não possui um criado, entre no diretório do projeto e o execute para garantir que está tudo certo.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;meteor create my-project
cd my-project
meteor run
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Por padrão, Meteor usa React e cria um subdiretório chamado &lt;code&gt;my-project&lt;/code&gt;.&lt;/p&gt;

&lt;h2&gt;
  
  
  Instalando Tailwind via npm
&lt;/h2&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;meteor npm install tailwindcss@2.2.19 postcss@8.3.1 postcss-load-config@3.1.0 autoprefixer@10.4.0
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;É recomendado utilizar o comando &lt;code&gt;meteor npm&lt;/code&gt; ao invés de somente &lt;code&gt;npm&lt;/code&gt; para usar a versão do npm que já vem com o próprio Meteor.&lt;/p&gt;

&lt;p&gt;Meteor ainda não é compatível com Tailwind 3.&lt;/p&gt;

&lt;h2&gt;
  
  
  Instalando um pacote Meteor para postcss
&lt;/h2&gt;

&lt;p&gt;Instale &lt;a href="https://github.com/Meteor-Community-Packages/meteor-postcss" rel="noopener noreferrer"&gt;juliancwirko:postcss&lt;/a&gt; e remova o minificador padrão do Meteor.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;meteor remove standard-minifier-css
meteor add juliancwirko:postcss
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  Configure o postcss
&lt;/h2&gt;

&lt;p&gt;Crie um arquivo chamado &lt;code&gt;.postcssrc.js&lt;/code&gt;, adicione o tailwindcss e o autoprefixer à sua configuração do PostCSS.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;// .postcssrc.js
module.exports = ctx =&amp;gt; {
  // This flag is set when loading configuration by this package
  if (ctx.meteor) {
    const config = {
      plugins: {
        tailwindcss: {},
        autoprefixer: {},
      },
    };

    if (ctx.env === 'production') {
      // "autoprefixer" is reported to be slow,
      // so we use it only in production.
      config.plugins.autoprefixer = {
        overrideBrowserslist: ['defaults'],
      };
    }

    return config;
  } else {
    return {};
  }
};
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  Inclua o Tailwind em seu CSS
&lt;/h2&gt;

&lt;p&gt;Adicione o Tailwind ao seu arquivo &lt;code&gt;main.css&lt;/code&gt;.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;// main.css
@tailwind base;
@tailwind components;
@tailwind utilities;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  Configure o Tailwind
&lt;/h2&gt;

&lt;p&gt;Crie um arquivo chamado &lt;code&gt;tailwind.config.js&lt;/code&gt; com o conteúdo abaixo:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;// tailwind.config.js
module.exports = {
  purge: [],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {},
  plugins: [],
}
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  Construindo seu CSS
&lt;/h2&gt;

&lt;p&gt;Quanto estiver construindo seu app para produção, garanta que configurou a opção de purge para remover quaisquer classes de CSS não utilizadas para ter o menor tamanho de arquivo possível:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;// tailwind.config.js
module.exports = {
  purge: ['./imports/ui/**/*.{js,jsx,ts,tsx}', './public/*.html'],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {},
  plugins: [],
}
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Referências:&lt;br&gt;
&lt;a href="https://tailwindcss.com/docs/installation" rel="noopener noreferrer"&gt;https://tailwindcss.com/docs/installation&lt;/a&gt;&lt;br&gt;
&lt;a href="https://github.com/meteor/examples/tree/main/tailwindcss" rel="noopener noreferrer"&gt;https://github.com/meteor/examples/tree/main/tailwindcss&lt;/a&gt;&lt;/p&gt;

</description>
      <category>meteor</category>
      <category>javascript</category>
      <category>node</category>
    </item>
    <item>
      <title>Installing Tailwind CSS 2 in a Meteor project</title>
      <dc:creator>Frederico Maia</dc:creator>
      <pubDate>Thu, 04 Nov 2021 11:50:27 +0000</pubDate>
      <link>https://dev.to/fredmaiaarantes/installing-tailwind-in-a-meteor-project-2b6h</link>
      <guid>https://dev.to/fredmaiaarantes/installing-tailwind-in-a-meteor-project-2b6h</guid>
      <description>&lt;p&gt;&lt;a href="https://dev.to/fredmaiaarantes/instalando-tailwind-css-em-um-projeto-meteor-gl4"&gt;Versão em português&lt;/a&gt;.&lt;/p&gt;

&lt;p&gt;Update: this tutorial is for Meteor 2.6 and lower versions. Meteor now supports Tailwind 3, you can follow a more recent blog post &lt;a href="https://blog.meteor.com/meteor-js-with-react-and-tailwind-css-3-3e878645451e" rel="noopener noreferrer"&gt;Meteor.js with React and Tailwind CSS 3&lt;/a&gt;. &lt;/p&gt;




&lt;p&gt;Meteor is a super productive JS framework that allows us to implement functionalities in both the backend and the frontend sides. Tailwind is a CSS framework for building modern websites and apps. The combination of the two gives us an excellent combo!&lt;/p&gt;

&lt;p&gt;Tailwind CSS has some peculiarities when it comes to building and parsing our pages, so we need some steps to integrate them.&lt;/p&gt;

&lt;h2&gt;
  
  
  Creating your project
&lt;/h2&gt;

&lt;p&gt;Start by creating a new &lt;a href="https://meteor.com" rel="noopener noreferrer"&gt;Meteor&lt;/a&gt; project if you don’t have one set up already, enter in the project folder and run it to make sure it is all correct.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;meteor create my-project
cd my-project
meteor run
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;By default, it uses React and makes a subdirectory named &lt;code&gt;my-project&lt;/code&gt;.&lt;/p&gt;

&lt;h2&gt;
  
  
  Install Tailwind via npm
&lt;/h2&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;meteor npm install tailwindcss@2.2.19 postcss@8.3.1 postcss-load-config@3.1.0 autoprefixer@10.4.0
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;It is recommended to use &lt;code&gt;meteor npm&lt;/code&gt; command instead of only &lt;code&gt;npm&lt;/code&gt; to use the npm version bundled with Meteor itself.&lt;/p&gt;

&lt;h2&gt;
  
  
  Install Meteor package for postcss
&lt;/h2&gt;

&lt;p&gt;Install &lt;a href="https://github.com/Meteor-Community-Packages/meteor-postcss" rel="noopener noreferrer"&gt;juliancwirko:postcss&lt;/a&gt; and remove the Meteor standard minifier.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;meteor remove standard-minifier-css
meteor add juliancwirko:postcss
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  Configure postcss
&lt;/h2&gt;

&lt;p&gt;Create a file named .postcssrc.js, add tailwindcss and autoprefixer to your PostCSS configuration.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;// .postcssrc.js
module.exports = ctx =&amp;gt; {
  // This flag is set when loading configuration by this package
  if (ctx.meteor) {
    const config = {
      plugins: {
        tailwindcss: {},
        autoprefixer: {},
      },
    };

    if (ctx.env === 'production') {
      // "autoprefixer" is reported to be slow,
      // so we use it only in production.
      config.plugins.autoprefixer = {
        overrideBrowserslist: ['defaults'],
      };
    }

    return config;
  } else {
    return {};
  }
};
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  Include Tailwind in your CSS
&lt;/h2&gt;

&lt;p&gt;Add Tailwind to your main.css file.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;// main.css
@tailwind base;
@tailwind components;
@tailwind utilities;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  Configure Tailwind
&lt;/h2&gt;

&lt;p&gt;Create a &lt;code&gt;tailwind.config.js&lt;/code&gt; file with the content below:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;// tailwind.config.js
module.exports = {
  purge: [],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {},
  plugins: [],
}
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  Building your CSS
&lt;/h2&gt;

&lt;p&gt;When building for production, be sure to configure the purge option to remove any unused classes for the smallest file size:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;// tailwind.config.js
module.exports = {
  purge: ['./imports/ui/**/*.{js,jsx,ts,tsx}', './public/*.html'],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {},
  plugins: [],
}
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;References:&lt;br&gt;
&lt;a href="https://tailwindcss.com/docs/installation" rel="noopener noreferrer"&gt;https://tailwindcss.com/docs/installation&lt;/a&gt;&lt;br&gt;
&lt;a href="https://github.com/meteor/examples/tree/main/tailwindcss" rel="noopener noreferrer"&gt;https://github.com/meteor/examples/tree/main/tailwindcss&lt;/a&gt;&lt;/p&gt;

</description>
      <category>meteor</category>
      <category>javascript</category>
      <category>tailwindcss</category>
      <category>react</category>
    </item>
    <item>
      <title>Meus salários como Desenvolvedor no Brasil e como foi a evolução da minha carreira</title>
      <dc:creator>Frederico Maia</dc:creator>
      <pubDate>Mon, 17 Feb 2020 13:32:16 +0000</pubDate>
      <link>https://dev.to/fredmaiaarantes/meus-salarios-no-brasil-e-como-foi-a-evolucao-da-minha-carreira-2i19</link>
      <guid>https://dev.to/fredmaiaarantes/meus-salarios-no-brasil-e-como-foi-a-evolucao-da-minha-carreira-2i19</guid>
      <description>&lt;p&gt;Se você é desenvolvedor de software e usa o Twitter com certa frequência, deve ter visto a enorme discussão deste último final de semana sobre ser positivo ou negativo a divulgação de salários na rede.&lt;/p&gt;

&lt;p&gt;Isso começou com programadores gringos e foi parar no Brasil, porém com toda a polêmica gerada muitas pessoas que haviam divulgado os salários, inclusive eu, resolveram apagar.&lt;/p&gt;

&lt;p&gt;A intenção me parecia boa, ao menos a minha era boa, mas alguns pontos negativos levantados faziam sentido. Então, resolvi tentar tirar algo de bom dessa treta toda e compartilhar com vocês um pouco da minha trajetória. As pessoas que me acompanham no Instagram (&lt;a class="mentioned-user" href="https://dev.to/fredmaiaarantes"&gt;@fredmaiaarantes&lt;/a&gt;) ou no Youtube (Goianos na Irlanda) sabem que hoje moro na Irlanda e sempre gero conteúdos pra ajudar e informar quem tem interesse de trabalhar por aqui. Porém vou compartilhar apenas meus salários de quando eu morava no Brasil.&lt;/p&gt;

&lt;p&gt;A minha intenção aqui é mostrar que todos (ou quase todos) começam de baixo e tentar mostrar um pouco de como eu consegui ir evoluindo na minha carreira e ir aumentando meu salário com o tempo.&lt;/p&gt;

&lt;p&gt;O início é difícil pra todo mundo. Para alguns, é muito mais difícil que pra outros. Eu sou muito privilegiado de, ao trancos e barrancos, ter tido condições de estudar em uma faculdade, ter comida em casa e não precisar trabalhar pra me sustentar, já que morava com meus pais que me proviam tudo isso. Apesar dos privilégios, espero contribuir com minhas experiências. E espero que mais pessoas compartilhem as suas.&lt;/p&gt;

&lt;p&gt;Vamos às experiências profissionais, iniciando pelo início! Passei por muitas empresas, então vou tentar ser direto nas respostas seguindo uma linha do tempo como se estivesse falando do meu currículo. &lt;/p&gt;

&lt;p&gt;Ao final do post, tentarei sumarizar algumas dicas e concluir o que mais contribuiu para o meu crescimento profissional, pensando em carreira e pensando em salário. O salário não será 100% certo, pois não lembro o valor exato de alguns. Vamos lá!&lt;/p&gt;

&lt;h2&gt;
  
  
  Minha trajetória profissional no Brasil
&lt;/h2&gt;

&lt;p&gt;&lt;strong&gt;Maio/2008 - Outubro/2010: Estagiário (Goiânia)&lt;/strong&gt;&lt;br&gt;
&lt;em&gt;Como soube da vaga e me candidatei?&lt;/em&gt;&lt;br&gt;
Após participar de um evento gratuito da Microsoft chamado Student to Business, meu currículo foi parar no banco de dados da empresa e fui comunicado sobre o processo de seleção.&lt;/p&gt;

&lt;p&gt;&lt;em&gt;Quanto era o salário?&lt;/em&gt;&lt;br&gt;
Comecei minha jornada ganhando R$200,00 + vale transporte para trabalhar por meio período. Ganhei alguns aumentos nesse período e após 2 anos passei a trabalhar full-time. Quando saí em 2010 ganhava por volta de R$800,00 por mês.&lt;br&gt;
Aprendi muito por lá e mesmo tendo recebido ofertas com salários melhores, eu preferi continuar no estágio, pois tinha certeza que o meu aprendizado valeria muito a pena pra minha carreira.&lt;/p&gt;

&lt;p&gt;&lt;em&gt;Por qual motivo saí da empresa?&lt;/em&gt;&lt;br&gt;
Decidi sair pois queria focar em desenvolvimento Java, nessa empresa eu trabalhava com projetos muito diversos. E enxergava que o foco em uma linguagem iria me fazer um profissional melhor e teria melhores oportunidades.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Novembro/2010 – Julho/2011: Desenvolvedor Java (Goiânia)&lt;/strong&gt;&lt;br&gt;
&lt;em&gt;Como soube da vaga e me candidatei?&lt;/em&gt;&lt;br&gt;
Um amigo meu era consultor Java e nos ajudou na empresa anterior. Ele me falou que precisavam de um desenvolvedor Pleno para um projeto deles e me perguntou se eu tinha interesse. De início eu falei que não, pois era estagiário e perguntei se tinha vaga de Júnior, ele me convenceu de que eu daria conta de encarar a vaga de pleno, me deu dicas pro processo seletivo e eu passei.&lt;/p&gt;

&lt;p&gt;&lt;em&gt;Quanto era o salário?&lt;/em&gt;&lt;br&gt;
De R$800,00 na empresa anterior, passei a ganhar R$2.200,00. Foi um salto gigante pra mim, tanto na carreira quanto financeiramente. Era contratado como cooperado e não como CLT.&lt;/p&gt;

&lt;p&gt;&lt;em&gt;Por qual motivo saí da empresa?&lt;/em&gt;&lt;br&gt;
Por não ser CLT eu já entrei nela pensando em ficar pouco tempo. Na minha cabeça e por pressão da família eu precisava de um emprego CLT. Então saí quando tive essa oportunidade.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Agosto/2011 – Agosto/2012: Desenvolvedor Java (Goiânia)&lt;/strong&gt;&lt;br&gt;
&lt;em&gt;Como soube da vaga e me candidatei?&lt;/em&gt;&lt;br&gt;
Um amigo que era instrutor de cursos na primeira empresa que fiz estágio, trabalhava nessa nova empresa. Eles tinham um sistema gigante que seria migrado de Delphi para Java. Esse amigo comentou com outro amigo em comum sobre a vaga, eu entrei em contato com ele pra saber mais, pedir umas dicas e me candidatei.&lt;/p&gt;

&lt;p&gt;&lt;em&gt;Quanto era o salário?&lt;/em&gt;&lt;br&gt;
O salário era algo por volta de R$2.600,00 e depois tive algum aumento. O projeto era muito importante na empresa, fazíamos parte do departamento de inovação e tínhamos uma enorme resposabilidade no futuro da empresa.&lt;/p&gt;

&lt;p&gt;&lt;em&gt;Por qual motivo saí da empresa?&lt;/em&gt;&lt;br&gt;
Nessa época eu passei a me interessar por outras linguagens, testes automatizados e TDD. Fiz um processo seletivo na Thoughtworks, me apaixonei pela cultura da empresa, fui aprovado no processo seletivo mas acabei recusando a proposta. Eu teria que mudar de cidade e não era o momento adequado na minha vida pessoal.&lt;br&gt;
Pouco tempo depois uma startup entrou em contato comigo e tinha similaridades com o que eu queria trabalhar, linguagens diferentes e uma cultura ágil. Entrei nela mas meu tempo nessa startup foi bem curto então nem vou citar.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Novembro/2012 – Maio/2013: Desenvolvedor Scala (Goiânia)&lt;/strong&gt;&lt;br&gt;
&lt;em&gt;Como soube da vaga e me candidatei?&lt;/em&gt;&lt;br&gt;
As coisas não foram bem na startup que entrei anteriormente. Expectativa e realidade de ambas as partes não bateram. Mais uma vez, amigos do grupo de Java que eu participava me indicaram para essa nova vaga.&lt;/p&gt;

&lt;p&gt;&lt;em&gt;Quanto era o salário?&lt;/em&gt;&lt;br&gt;
O salário era algo por volta de R$3.300,00. Meu objetivo de aprender linguagens novas estava sendo alcançado. Trabalhei principalmente com Scala e também com Groovy em projetos bem legais e inovadores.&lt;/p&gt;

&lt;p&gt;&lt;em&gt;Por qual motivo saí da empresa?&lt;/em&gt;&lt;br&gt;
Pela primeira vez eu saí por causa de salário. Meu salário líquido era algo por volta de R$2.700,00 (não lembro exatamente). Recebi uma proposta muito boa, irrecusável na minha opinião e decidi aceitar.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Junho/2013 – Agosto/2014: Consultor Java (Goiânia)&lt;/strong&gt;&lt;br&gt;
&lt;em&gt;Como soube da vaga e me candidatei?&lt;/em&gt;&lt;br&gt;
Nesse período eu estava ministrando cursos de Java e comecei a dar aulas particulares para um aluno que após algum tempo me disse que era dono de uma empresa e estava estudando Java para entender melhor como funcionava pois precisaria em breve de um consultor para um projeto grande que estava pra fechar.&lt;/p&gt;

&lt;p&gt;&lt;em&gt;Quanto era o salário?&lt;/em&gt;&lt;br&gt;
Nessa empresa também entrei com o modelo de cooperativa e meu salário líquido era de R$5.000,00. Quase o dobro do valor líquido anterior.&lt;/p&gt;

&lt;p&gt;&lt;em&gt;Por qual motivo saí da empresa?&lt;/em&gt;&lt;br&gt;
Decidi me mudar de Goiânia nessa época, em busca de desafios novos e maiores na minha carreira. Analisei São Paulo, Rio de Janeiro e Porto Alegre e acabei conquistando uma oportunidade no Rio de Janeiro e decidi me mudar. &lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Agosto/2014 – Maio/2015: Desenvolvedor Java / Groovy (Rio de Janeiro)&lt;/strong&gt;&lt;br&gt;
&lt;em&gt;Como soube da vaga e me candidatei?&lt;/em&gt;&lt;br&gt;
Na minha busca por uma nova cidade e projetos maiores, entrei em contato com um amigo que morava no Rio e coincidência ou não, havia uma vaga aberta na empresa que ele trabalhava, enviei meu CV e já estava com viagem de férias planejada para o Rio, todas as datas bateram, fiz o processo seletivo e fui aprovado.&lt;/p&gt;

&lt;p&gt;&lt;em&gt;Quanto era o salário?&lt;/em&gt;&lt;br&gt;
A contratação era CLT e o salário algo por volta de R$5.500,00. O valor líquido diminuiu bastante se comparado ao meu emprego anterior. Ainda saí da casa dos meus pais e passei a pagar aluguel e todas as minhas contas. Além de ir morar em uma cidade com custo de vida bem maior. Apesar de acabar ganhando menos, era o melhor pra minha carreira.&lt;/p&gt;

&lt;p&gt;&lt;em&gt;Por qual motivo saí da empresa?&lt;/em&gt;&lt;br&gt;
Eu era terceirizado em uma empresa para um projeto do Governo e nessa época com o escândalo do mensalão e a crise iniciada no Rio, o projeto chegou ao fim antes do tempo previsto. Saí da empresa pouco antes do prazo final do projeto.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Abril/2016 – Setembro/2017: Líder de Time e Desenvolvedor Java / JavaScript (Remoto)&lt;/strong&gt;&lt;br&gt;
&lt;em&gt;Como soube da vaga e me candidatei?&lt;/em&gt;&lt;br&gt;
Mais uma vez, um amigo meu me indicou. Ele foi passar uns dias lá em casa no Rio e me falou da empresa atual. Trabalho remoto, algo que eu buscava há tempos. Nao tinha vaga aberta mas com a indicação dele a empresa resolveu me testar. Fiz todo o processo seletivo, fui aprovado e criaram uma vaga pra mim.&lt;/p&gt;

&lt;p&gt;&lt;em&gt;Quanto era o salário?&lt;/em&gt;&lt;br&gt;
Se não me engano entrei ganhando R$7.500,00 e depois foi para R$8.000,00. Nessa época me mudei para Goiânia novamente, depois voltei para o Rio, depois vim para a Irlanda. Sinto sua falta trabalho remoto &amp;lt;3.&lt;/p&gt;

&lt;p&gt;&lt;em&gt;Por qual motivo saí da empresa?&lt;/em&gt;&lt;br&gt;
Estava morando na Irlanda e ganhar em reais e gastar em euros não estava sendo  fácil. Passei em um processo seletivo na Irlanda onde consegui o visto de trabalho e dei outro grande passo na minha carreira, iniciando meu primeiro trabalho internacional.&lt;/p&gt;

&lt;h2&gt;
  
  
  Como consegui aumentar meu salário?
&lt;/h2&gt;

&lt;p&gt;Bem, você pode perceber claramente que em toda mudança de emprego, ao menos em quase todas, meu salário foi aumentando. É o que mais dizem por aí que &lt;strong&gt;pra conseguir um aumento significativo você tem que trocar de empresa&lt;/strong&gt;. Nao é o que me motiva, nunca foi, claro que o salário é muito importante mas não é o mais priotário pra mim. Em apenas uma dessas mudanças o salário foi o que me fez trocar de emprego.&lt;/p&gt;

&lt;p&gt;Minhas mudanças são sempre muito mais focadas no meu crescimento  pessoal e profissional, avalio muito bem a cultura da empresa, projetos, ambiente, tecnologias e vejo se ambos (eu e a nova empresa) vão sair ganhando. Parte do que chamam de cultural fit.&lt;/p&gt;

&lt;p&gt;Outro fator sempre muito presente e que &lt;strong&gt;colaborou muito com meu crescimento foi o networking&lt;/strong&gt;. O famoso QI (quem indica). Muita gente acha que networking é ter muitas conexões no LinkedIn. Pra mim é ter conexões reais com pessoas que compartilham dos mesmos objetivos, que geram valor um pro outro e que se ajudam na jornada de aprendizagem e profissional.&lt;/p&gt;

&lt;p&gt;Já ouvi dizer que com QI é muito fácil. É claro que facilita, com certeza ajuda. Mas uma indicação real, uma recomendação sólida, só é feita quando se conhece de perto a pessoa e há confiança no trabalho dela. Ninguém recomenda um amigo na empresa se esse amigo for alguém que não agrega valor e que não se esforça para dar o seu melhor no trabalho.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;E como se faz networking?&lt;/strong&gt; Posso dizer como foi pra mim. Participando de eventos da área, ministrando palestras em eventos, mais a frente sendo coordenador de grupos de tecnologia, indo atrás de patrocínios, locais para eventos e etc. Contribuindo com outras pessoas de forma genuína.&lt;/p&gt;

&lt;p&gt;Tive blog por muitas vezes, parava e começava mas nunca desisti de compartilhar. Hoje gero conteúdo principalmente no Instagram e Youtube e agora aqui mais uma vez, escrevendo para um novo blog. Resumindo, colabore com outras pessoas e um dia isso volta pra você. Suas atitudes, sejam boas ou ruins, voltarão pra você de alguma forma.&lt;/p&gt;

&lt;p&gt;Outra coisa que posso acrescentar que me ajudou na minha carreira, foi ser mais ativo nas empresas, dar minha opinião nos momentos de tomada de decisão e não apenas esperar que decidam tudo por mim.&lt;/p&gt;

&lt;p&gt;E claro, melhoria contínua com cursos e estudos que sempre fiz por conta própria. Não espere que sua empresa invista em você, que a empresa te pague um curso ou que a empresa te dê tempo pra estudar. Se ela der, ótimo! Mas não conte com isso e seja dono da sua carreira.&lt;/p&gt;

&lt;p&gt;E pra fechar, cuide da sua saúde, da sua vida pessoal e de seus relacionamentos. Tive momentos onde foquei demais na carreira e minha vida pessoal foi para o buraco. Você tem muito mais chances de ser um profissional melhor, quando se torna uma pessoa melhor.&lt;/p&gt;

&lt;p&gt;&lt;em&gt;Ficaria grato de saber se esse post te ajudou de alguma forma. E se algo não ficou muito claro, só deixar um comentário que eu te respondo e/ou atualizo o post.&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;Até a próxima!&lt;/p&gt;

</description>
      <category>salary</category>
      <category>career</category>
      <category>developer</category>
    </item>
    <item>
      <title>Top websites to find a remote programming job</title>
      <dc:creator>Frederico Maia</dc:creator>
      <pubDate>Wed, 29 Jan 2020 16:12:47 +0000</pubDate>
      <link>https://dev.to/fredmaiaarantes/top-websites-to-find-a-remote-programming-job-in-2020-4b54</link>
      <guid>https://dev.to/fredmaiaarantes/top-websites-to-find-a-remote-programming-job-in-2020-4b54</guid>
      <description>&lt;p&gt;One of the first challenges to find a remote job is to discover where are the opportunities. Look at the websites below to find a remote job as Software Developer.&lt;/p&gt;

&lt;p&gt;Stackoverflow&lt;br&gt;
&lt;a href="https://stackoverflow.com/jobs/remote-developer-jobs" rel="noopener noreferrer"&gt;https://stackoverflow.com/jobs/remote-developer-jobs&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;We work remotely&lt;br&gt;
&lt;a href="https://weworkremotely.com/categories/remote-programming-jobs" rel="noopener noreferrer"&gt;https://weworkremotely.com/categories/remote-programming-jobs&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;RemoteOK&lt;br&gt;
&lt;a href="https://remoteok.io/remote-dev-jobs" rel="noopener noreferrer"&gt;https://remoteok.io/remote-dev-jobs&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Remotive&lt;br&gt;
&lt;a href="https://remotive.io/remote-jobs/software-dev" rel="noopener noreferrer"&gt;https://remotive.io/remote-jobs/software-dev&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Jobspresso&lt;br&gt;
&lt;a href="https://jobspresso.co/remote-software-jobs/" rel="noopener noreferrer"&gt;https://jobspresso.co/remote-software-jobs/&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Working Nomads&lt;br&gt;
&lt;a href="https://www.workingnomads.co/jobs?category=development" rel="noopener noreferrer"&gt;https://www.workingnomads.co/jobs?category=development&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;BairesDev&lt;br&gt;
&lt;a href="https://www.bairesdev.com/careers/" rel="noopener noreferrer"&gt;https://www.bairesdev.com/careers/&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Toptal&lt;br&gt;
&lt;a href="https://www.toptal.com/developers/join" rel="noopener noreferrer"&gt;https://www.toptal.com/developers/join&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Glassdoor&lt;br&gt;
&lt;a href="https://www.glassdoor.com/blog/work-from-home-jobs-now/" rel="noopener noreferrer"&gt;https://www.glassdoor.com/blog/work-from-home-jobs-now/&lt;/a&gt;&lt;br&gt;
&lt;a href="https://www.glassdoor.com/blog/companies-that-let-you-work-remotely/" rel="noopener noreferrer"&gt;https://www.glassdoor.com/blog/companies-that-let-you-work-remotely/&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Findwork&lt;br&gt;
&lt;a href="https://findwork.dev/" rel="noopener noreferrer"&gt;https://findwork.dev/&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Employ Remotely&lt;br&gt;
&lt;a href="https://www.employremotely.com/" rel="noopener noreferrer"&gt;https://www.employremotely.com/&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Vanhack&lt;br&gt;
&lt;a href="https://vanhack.com/" rel="noopener noreferrer"&gt;https://vanhack.com/&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Which of those do you think are the best ones?&lt;br&gt;
Please, add to the discussion. :)&lt;/p&gt;

</description>
      <category>remote</category>
      <category>developer</category>
      <category>programmer</category>
      <category>wfh</category>
    </item>
  </channel>
</rss>
