Tailwind Titan is a Visual Studio Code extension that detects if a Nuxt.js project is using Tailwind CSS and transforms the custom Tailwind classes into optimized vanilla CSS. It was made out of the need to solve the issue of Tailwind styles not being shown on static site generation (with npm run generate). A few issues have been opened but the solutions suggested haven't worked all the time. This extension will create a /<rootDir>/assets/css/global.css file containing vanilla css representations of the tailwind classes in the components and pages as a hack for bypassing the UI framework.
[NOTE:] THIS PROJECT IS IN ACTIVE DEVELOPMENT. REFER TO THE GIHUB REPOSITORY OR PROJECT WIKI FOR MORE DETAILS.
- Detects if Tailwind CSS is installed in the project.
- Transforms the custom tailwind code into optimized vanilla CSS.
- Project has initialized tailwind with
npx tailwindcss init - Visual Studio Code v^1.76.0
- TailwindCSS v^4.x
- Open Visual Studio Code
- Go to the Extensions view (View > Extensions)
- Search for "Tailwind Titan"
- Click Install to install the extension
- Open a Nuxt.js project that uses Tailwind CSS
- Run the "Check & Transform Tailwind CSS" command in the Command Palette (Ctrl/Cmd + Shift + P)
- If Tailwind CSS is detected, the CSS code will be transformed into optimized CSS automatically and saved in a temporary file location to be moved to the path of your choice.
This extension is licensed under the MIT License. See the LICENSE file for details.
If you encounter any issues or have any feature requests, please file an issue on the GitHub repository.
- None yet
- Plug and Play
- Considers a project invalid if
tailwind.config.jsnot available even if tailwind is in use in components and pages. - Ignores styles in class attributes (For now.)
Initial release
Minor code refactoring
Enjoy!