Bubble.io and Tailwind integration: Step-by-Step Guide 2024

Step 1: Install Tailwind CSS
Prior to integrating with Bubble.io, we need to first install Tailwind CSS. For this, we need Node.js and npm installed on our system. Below are the required installation steps.

• Open your terminal.
• Check if you have Node.js installed by typing node -v. If a version number is displayed, then you have Node.js. If it's not installed, download and install it from https://nodejs.org/.
• Check if you have npm installed by typing npm -v. If a version number displays, then you have npm. If not, npm comes bundled with Node.js so it will be installed when you install Node.js.
• Once you confirm you have Node.js and npm, navigate to your project folder with this command: cd your-project-folder.
• In your project folder, install Tailwind via npm by running npm install tailwindcss.
• After installing Tailwind CSS, generate the configuration file by running npx tailwindcss init. This creates a tailwind.config.js file at the root of your project where you can customize your design system.

NOTE: If you're using a different installation technique (e.g. cdn, postscript), the subsequent steps will still apply, but the file names/paths may differ.

Step 2: Build Your CSS

• After installing Tailwind and generating the configuration file, you'll need to build your CSS. To do this, open the tailwind.config.js file that was created in the previous step.
• In this config file, you need to specify the paths to all of your CSS files. The configuration should look something like this:

module.exports = {
  purge: ['./src/**/*.html', './src/**/*.vue', './src/**/*.jsx'],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

• Save and close this file.
• Now, in the Terminal or Command Prompt, navigate to your project's root directory and input the following command and press Enter: npx tailwindcss build -o tailwind.css. This will create a tailwind.css file in the root of your project.

Step 3: Set Up A Bubble.io Application

• Open up your web browser and navigate to Bubble.io.
• If you don't have an account yet, sign up for one and log in.
• Once you're logged in, on your Dashboard, click on the "New App" button.
• Give your application a name, select a plan (free to begin with), and hit the "Create a new app" button.

Step 4: Upload Your CSS

• Now, we need to upload our tailwind.css file to Bubble.
• In your application, go to the settings (gear icon) and then select the "SEO & metatags" tab via the left-hand navigation bar.
• Scroll down to the "Script/meta tags in header" section and click on the "Add a new script/meta tag" button.
• An editor will appear. In the Type drop-down menu, select Style (CSS) from the list.
• Open your generated tailwind.css file with a text editor (like Notepad, or TextEdit on macOS) and copy all the content.
• Paste this CSS into the Add a new script/meta tag text area on Bubble.io.
• Click on the Save button when you're done.

Step 5: Utilize Tailwind CSS

• You can now use Tailwind CSS classes throughout your Bubble.io application. To do this, select an element on the Bubble canvas, go to the Element Inspector on the left, scroll down to the ID attribute and give it an ID.
• Move rightward and under the Type dropdown, select Style (CSS). Add your Tailwind CSS utility classes here.

Congratulations! You now have Tailwind CSS integrated with your Bubble.io app. You successfully integrated a powerful tool into your web development toolkit on Bubble.io to make your application more interactive and visually compelling.