← All posts

Edit Your Tailwind Config in VS Code with Winden File Sync

winden

Editing a Tailwind config in a small textarea in WordPress admin gets slow once the config grows, and you lose your own editor's shortcuts, extensions and formatting. Winden can sync your Tailwind config and global CSS both ways between its settings panel and real files on disk. You edit in VS Code or any other IDE, reload, and the change is in Winden. It also works the other way.

Where the synced files live

The fields on the Winden Settings page are handy for quick edits. But if you work on a local site all day, you want these files in your own code editor. Winden reads them from a folder inside your uploads directory.

The folder is wp-content/uploads/winden. In the video we create the winden folder by hand next to the existing 2022, oxygen and scripts-organizer folders, then add three files. Each file matches a field on the Settings tab:

| File | Winden field | |---|---| | global.css | Global CSS | | cdn.config.js | Tailwind Config (CDN) | | tailwind.config.js | Tailwind Config (Worker) |

Copy your current settings first

When these files exist, Winden reads its fields from them. If you create empty files and reload the settings page, the fields will be empty too. Copy what you have first so nothing is lost.

  1. Open Winden → Settings and copy the contents of Global CSS, Tailwind Config (CDN) and Tailwind Config (Worker).
  2. Create the winden folder in wp-content/uploads.
  3. Create global.css, cdn.config.js and tailwind.config.js in that folder.
  4. Paste each field's content into the matching file and save.
  5. Reload the Winden settings page. The fields now show the file contents.

For reference, this is the default Global CSS in the video:

@tailwind base;
@tailwind components;
@tailwind utilities;

And this is the default Tailwind Config (CDN):

module.exports = {
  theme: {
    extend: {
      colors: {
        clifford: '#da373d',
      },
      // ...
    },
  },
  plugins: [],
}

The Worker config was empty on this site, so its file can start empty as well.

Edit in your IDE, see it in Winden

This is where you save time. You write CSS and config in the editor you already use, and WordPress picks it up without any copy and paste.

  1. Open global.css in VS Code.
  2. Add a rule, for example:
@tailwind base;
@tailwind components;
@tailwind utilities;

.test{
    background: blue;
}
  1. Save the file and reload the Winden settings page. The Global CSS field now shows the .test rule.

The sync also works the other way. Change a value in the Winden panel, save, and the file on disk updates. So you can switch between the admin screen and your IDE without the two getting out of sync.

You don't have to use this. The admin fields still work on their own. But on a local site, editing these files in your own editor makes day-to-day Tailwind work much faster.

Who is this for

  • Developers building WordPress sites locally who want to edit their Tailwind config and CSS in VS Code instead of an admin textarea.
  • Winden users with a growing config who want proper syntax highlighting, formatting and editor extensions.
  • Anyone using Winden with Oxygen Builder or another builder who switches between the builder and a code editor and wants one source for their Tailwind setup.

FAQ

Where does Winden store the Tailwind config files? In wp-content/uploads/winden. The files are global.css for Global CSS, cdn.config.js for Tailwind Config (CDN) and tailwind.config.js for Tailwind Config (Worker).

Why did my Winden settings go blank after I created the files? Once the files exist, Winden reads its fields from them. Empty files mean empty fields. Paste your existing settings into the files, save them, and reload the page.

Do I have to reload the page to see changes from my editor? Yes. In the video, the Winden panel shows the edited file contents after a page reload.

Can I still edit the config inside WordPress? Yes. The sync works both ways. Save a change in the Winden panel and the matching file on disk updates.

Get Winden → dplugins.com

Related posts