themes·  

_wt: WordPress starter theme with Tailwind CSS

Introducing _wt, a WordPress theme seamlessly integrated with Tailwind CSS via WindPress — without the complexity of a development environment.
Joshua

Joshua

@suasgn

We are excited to introduce _wt, a minimalist WordPress theme that offers built-in integration with Tailwind CSS via the WindPress plugin. Based on the foundation of the _tw theme, _wt simplifies and enhances WordPress development using Tailwind CSS, eliminating the need for a complex development environment.


🌟 Features of _wt

The _wt theme delivers a streamlined experience for WordPress developers and designers by using Tailwind CSS, with no hazzle and fuss. Why you’ll love _wt:

  • For those who know _tw theme well: If you’ve worked with the _tw theme before, _wt will feel instantly familiar—offering a similar structure and functionality with added enhancements.
  • Effortless Tailwind CSS integration: _wt comes with Tailwind CSS support by utlizing the WindPress plugin, the plug-and-play solution for using Tailwind CSS in WordPress.
  • No development environment required: Unlike _tw theme, which requires a local setup using Node.js and npm, _wt allows you to use the theme directly on any WordPress server, including shared hosting.
  • Gutenberg compatibility: Use Tailwind CSS classes in your Gutenberg blocks, enhancing the design and responsiveness of your content without writing custom CSS.
  • Classic editor support: _wt supports the classic editor, allowing you to use Tailwind CSS classes in your posts and pages seamlessly.

✅ Getting Started with _wt

To get started with the _wt theme, follow these simple steps:

  1. Install the WindPress plugin.
  2. Download the _wt theme from the GitHub repository.
  3. Install the _wt theme to your WordPress site via the admin dashboard:
    • Go to Appearance > Themes menu.
    • Click on Add New.
    • Click on Upload Theme button and select the downloaded zip file.
    • Click on Install Now and then Activate.
  4. Enable the integration with the WindPress plugin:
    • Go to WindPress menu and switch to the Files tab.
    • Open the main.css file.
    • Replace the contents of the file with the following code and save it:
      main.css
      @layer theme, base, components, utilities;
      
      @import './@_wt/tailwind.css';
      
  5. Optionally, you can customize the theme by editing the files in the @_wt directory with the WindPress file editor.
  6. Now you can start using the _wt theme with Tailwind CSS in your WordPress site.

🍻 Based on the _tw theme

_wt is a fork/modified version of the _tw theme featuring the latest updates from commit de60a04. The _wt theme retains the core structure and functionality of _tw while adding Tailwind CSS support through the WindPress plugin, making it easier to use without a local development environment.

Some of the notable changes include:

  1. The _wt theme is now available as a standalone theme, without the need for the _tw starter theme generator.
  2. Removal of the Composer and Node.js dependencies, to simplify the setup process and make it compatible with shared hosting environments. File that were removed:
    • composer.json
    • composer.lock
    • package.json
    • package-lock.json
    • etc.
  3. Updating the _tw keywords to _wt across the theme files, to reflect the new theme name.
  4. Move the tailwind.css file to the tailwindcss directory and update the content to be compatible with the WindPress plugin.
  5. Include the final build of script files into the js directory.
  6. Updating the functions.php file to remove the extra assets and scripts that are not needed in the _wt theme.
    functions.php
    // Enqueue editor styles.
    // add_editor_style( 'style-editor.css' );
    // add_editor_style( 'style-editor-extra.css' );
    
  7. Integrating the _wt theme with the WindPress plugin by adding the windpress.php file to the inc directory. The integrations includes:
    • Register the _wt theme provider for the WindPress Compiler's scanner.
    • Register the SFS handler (get and save) for the _wt theme files in the tailwindcss directory. This allows you to edit the Tailwind CSS files directly in the WindPress file editor.

🚀 Start Using _wt Today!

We hope you enjoy using _wt and look forward to seeing the amazing websites you create with it. Happy designing!

😎 Contribute to _wt

We welcome contributions and feedback from the community. If you have suggestions, encounter issues, or want to contribute to the development of _wt, please visit our GitHub repository and join the discussion.

🙏 Acknowledgments

The _wt theme is heavily inspired by, and partially contains, code derived from the following projects:

  • _tw theme by Greg Sullivan, which served as the foundation for _wt.
  • WindPress plugin which provides the Tailwind CSS integration for _wt.
  • Tailwind CSS for its utility-first CSS framework that powers the design of _wt.

We appreciate the hard work and dedication of these projects and their contributors.

📣 Stay Updated

To stay updated with the latest news and updates about _wt, follow us on:

  • Join us in the Discord or Facebook, and get involved in the active, friendly community!
  • Send us a support ticket and we will get back to you as soon as possible.
← Back to blog
Nuxt on X