TCSG is a Visual Studio Code extension designed to streamline the development workflow for Tailwind CSS projects. This extension provides ready to go component snippets easily customizable within the Tailwind CSS framework.
Installation
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.
TCSG is a Visual Studio Code extension designed to streamline the development workflow for Tailwind CSS projects. This extension provides ready to go component snippets easily customizable within the Tailwind CSS framework.
Features
NEW: Initialize Project: Get coding as soon as possible with the basics taken care of for you. The dependancies included for a new project are:
tailwindcss
prettier: to format your project in a conventional way.
prettier-plugin-tailwindcss: to keep a conventional order for your TailwindCSS classes.
clean-css-cli: to minify your CSS code to improve performance.
terser: to minify/uglify your JS code to improve performance.
Snippet Insertion: Quickly insert pre-defined Tailwind CSS component snippets from the click of a button, or the snippet prefix, into your HTML and JavaScript files, improving your development speed and consistency. The components included are:
Button (Primary, Disabled)
Navbar (Text based, Image based)
Image gallery
Modal (Viewport centered, Fullscreen)
More coming soon...
Build your project with the click of a button: Compile your Tailwind CSS using a custom build command that respects your project's specific configuration, directly from within VSCode.
How to use
NEW: Initialize Project:
Open the TCSG Snippets view on the left panel.
Select Input and Output files for the current project to compile Tailwind CSS. This is done with the "TCSG: Select Input/Output Files" command, or with the first icon that appears in the view.
Install the basic dependancies and create a package.json file with the "TCSG: Initialize Project" command, or with the second icon that appears in the view.
Configure the generated tailwind.config.js file to include all your sources for Tailwind CSS to compile in the output file.
Configure the terser script to include your Javascript source for minifying.
When ready, build the project (compile Tailwind CSS, minify CSS, and minify JS) with the "TCSG: Build Project" command, or with third icon that appears in the view.
OPTIONAL: If you want to clear the Input/Output file for the current project, use the "TCSG: Clear Input/Output Files" command, or the fourth icon that appears in the view.
Snippet Insertion:
Open the TCSG Snippets view on the left panel.
In a JavaScript or HTML file, insert the snippets by selecting the desired one inside the Tree View. For example, if I wanted to insert a centered modal component, I should follow the next steps:
In my HTML file, click on the HTML Snippets dropdown, and select the "Centered Modal" option.
In my JavaScript file, click on the Javascript Snippets dropdown, and select the "Centered Modal" option.
Keep in mind you have to include both of these files inside the source files for your Tailwind CSS configuration files.
With these steps, you have correctly inserted the "Centered Modal" component.
License
Distributed under the MIT License. See LICENSE for more information.
