https://github.com/idevelopthings/vue-tailwind-ui

Some vue/tailwind/inertia stuff I seem to be copying from project to project.
https://github.com/idevelopthings/vue-tailwind-ui

Last synced: 3 months ago
JSON representation

Some vue/tailwind/inertia stuff I seem to be copying from project to project.

• Host: GitHub
• URL: https://github.com/idevelopthings/vue-tailwind-ui
• Owner: iDevelopThings
• Created: 2022-10-01T15:40:01.000Z (over 2 years ago)
• Default Branch: master
• Last Pushed: 2022-10-14T00:50:03.000Z (over 2 years ago)
• Last Synced: 2025-02-08T16:30:02.369Z (3 months ago)
• Language: TypeScript
• Size: 448 KB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: readme.md

Awesome Lists containing this project

README

        
```shell

npm i @idevelopthings/vue-tailwind-ui

yarn add @idevelopthings/vue-tailwind-ui

```

## Tailwind Plugin for buttons/cards

![buttons/cards](https://user-images.githubusercontent.com/4105581/193417729-399e6843-c7aa-4425-b4de-fd91e319f093.png)

```js

/**

 * @type {import('tailwindcss/types/index').Config}

 */

module.exports = {

	content : ['index.html', './src/**/*.{js,jsx,ts,tsx,vue,html}'],

	theme   : {

		extend : {},

	},

	plugins : [

		require('@idevelopthings/vue-tailwind-ui/tailwind-plugin'),

	],

};

```

## Form CSS Helper

Update your main tailwind css file to include the import:

```css

@import "@idevelopthings/vue-tailwind-ui/src/components.css";

@tailwind base;

@tailwind components;

@tailwind utilities;

```

**Note:** The import must come before @tailwind directives, read the tailwind docs for more information

### Vue example:

```vue



    Name

    

    


        {{ form.errors?.name }}

    



```