Load Tailwind utilities inside the project

[dharveshmydeen]

Hi,

Good Day !

Since Im working on vue project I wanted to list out all the tailwind classes inside my project to suggest the user to pick respective classes for the layout.

[f3bw]

Good day,
I am not entirely sure what you meant with you message since I am not a regular vue user.
But this might be worth trying, I'll start from scratch.

1. Install the tailwindcss package: If you haven't already done so, install the Tailwind CSS package in your Vue project by running the following command:

   npm install tailwindcss --save-dev

2. Create a Tailwind CSS configuration file: Generate a Tailwind CSS configuration file by running the following command:

   npx tailwindcss init

   This command creates a tailwind.config.js file in your project root directory.

3. Configure Tailwind CSS for development: In the tailwind.config.js file, add the following configuration:

   module.exports = {
     purge: [],
     darkMode: false,
     theme: {
       extend: {},
     },
     variants: {},
     plugins: [],
   };

   The purge option will be used to remove unused CSS classes in production. For now, leave it empty to include all classes.

4. Create a utility CSS file: Create a new CSS file, let's say tailwind-utilities.css, in your project's CSS directory (e.g., src/assets/css/).

5. Import Tailwind CSS in the utility file: In the tailwind-utilities.css file, import Tailwind CSS by adding the following lines:

   @import 'tailwindcss/base';
   @import 'tailwindcss/components';
   @import 'tailwindcss/utilities';

   These imports will include all the base, component, and utility classes from Tailwind CSS.

6. Import the utility file in your Vue project: In your Vue project, locate the main entry file (e.g., main.js) and import the tailwind-utilities.css file:

   import './assets/css/tailwind-utilities.css';

   This ensures that the utility CSS file and all the Tailwind CSS classes are available in your project.

7. Build your project: Build your Vue project using the appropriate build command (e.g., npm run build). This step is necessary to generate the compiled CSS file that includes all the Tailwind CSS classes.

8. Extract the CSS classes: Once the build process is complete, you can extract all the Tailwind CSS classes from the compiled CSS file. You can use various tools or techniques to achieve this, such as:

   • Regular expression: You can use regular expressions to search for class names starting with specific patterns (e.g., bg-, text-, p-, etc.) within the compiled CSS file.
   • IDE plugins/extensions: Some IDEs or code editors provide plugins or extensions that can extract CSS class names from a file. These plugins/extensions often support advanced searching and filtering options.

   Choose the method that works best for you and your development environment to extract the class names from the compiled CSS file.

By following these steps, you'll be able to extract all the Tailwind CSS classes used in your Vue project and provide suggestions to users for selecting the appropriate classes for the layout.

[dharveshmydeen]

Good Day !

Thanks for sharing your thoughts

I already integrated tailwind in my vue project and its working fine.

I just want to list down all the classes which tailwind having in my project for custom component development.

Need to list down all the components inside the project as data list .

[ddacot]

Hi @dharveshmydeen, I was wondering if you figured out a way to do this as I would like to implement the same feature into my project?