{"id":13480450,"url":"https://github.com/brandonpittman/gridsome-plugin-tailwindcss","last_synced_at":"2025-03-27T10:32:44.869Z","repository":{"id":49523152,"uuid":"166966023","full_name":"brandonpittman/gridsome-plugin-tailwindcss","owner":"brandonpittman","description":"A Tailwind plugin for Gridsome.","archived":true,"fork":false,"pushed_at":"2020-12-01T11:46:33.000Z","size":484,"stargazers_count":103,"open_issues_count":0,"forks_count":14,"subscribers_count":8,"default_branch":"master","last_synced_at":"2024-10-30T14:41:44.039Z","etag":null,"topics":["css","gridsome","gridsome-plugin","gridsome-plugin-tailwindcss","postcss","tailwind"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":false,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/brandonpittman.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-01-22T09:29:45.000Z","updated_at":"2023-07-06T16:59:00.000Z","dependencies_parsed_at":"2022-09-26T16:32:15.209Z","dependency_job_id":null,"html_url":"https://github.com/brandonpittman/gridsome-plugin-tailwindcss","commit_stats":null,"previous_names":[],"tags_count":70,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/brandonpittman%2Fgridsome-plugin-tailwindcss","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/brandonpittman%2Fgridsome-plugin-tailwindcss/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/brandonpittman%2Fgridsome-plugin-tailwindcss/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/brandonpittman%2Fgridsome-plugin-tailwindcss/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/brandonpittman","download_url":"https://codeload.github.com/brandonpittman/gridsome-plugin-tailwindcss/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245827276,"owners_count":20678951,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["css","gridsome","gridsome-plugin","gridsome-plugin-tailwindcss","postcss","tailwind"],"created_at":"2024-07-31T17:00:39.541Z","updated_at":"2025-03-27T10:32:44.497Z","avatar_url":"https://github.com/brandonpittman.png","language":"JavaScript","funding_links":["https://www.buymeacoffee.com/blp"],"categories":["Tools"],"sub_categories":[],"readme":"🚨 **If you get errors about PostCSS v8, check out Tailwind's docs for the latest info about the [compat version](https://tailwindcss.com/docs/installation#post-css-7-compatibility-build).**\n\n# gridsome-plugin-tailwindcss\n\nThis plugin will add [Tailwind](http://tailwindcss.com) to your\n[Gridsome](http://gridsome.org) project.\n\n## Who This Is For\n\nIf you want to set up Tailwind with the least amount of effort in a Gridsome\nproject, this is for you. If you want to lean in to the _Way of\nTailwind_\u0026mdash;using `tailwind.config.js` or keep your CSS inside your Vue\nfiles' style blocks\u0026mdash;this is the plugin for you. If you want to have a\nglobal CSS file and dump a bunch of shit in there, you should look elsewhere.\n\n## Install\n\n`npm install -D gridsome-plugin-tailwindcss tailwindcss@latest` \n\n`npm install -D postcss-import postcss-preset-env #(if you want these plugins and you've updated the config)`\n\n## Usage\n\nI've gone ahead and automatically imported the default `tailwind.css` file from\nthe Tailwind npm package. It's just add a CSS file that includes:\n\n```postcss\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n```\n\n**You do not need to import Tailwind into a CSS file.**\n\nYou may be wondering, \"Where do I add global CSS?!\" Short answer, you don't.\nLong answer, read the Tailwind docs on [creating plugins][plugins] and use\n`tailwind.config.js` to add base styles and create components/utilities there.\n\n**If you need to create `tailwind.config.js`, run `./node_modules/.bin/tailwind init` to create one.**\n\n[plugins]: https://tailwindcss.com/docs/plugins/#app\n\n## Customize\n\nSet any options you want to set in `gridsome.config.js`.\n\n```javascript\nmodule.exports = {\n  plugins: [\n    {\n      use: \"gridsome-plugin-tailwindcss\",\n      /**\n      * These are the default options.\n\n      options: {\n        tailwindConfig: './tailwind.config.js',\n        presetEnvConfig: {},\n        shouldImport: false,\n        shouldTimeTravel: false\n      }\n      */\n    },\n  ],\n};\n```\n\n**If you don't supply a config file path, Tailwind defaults will be used.**\n\n## Plugins\n\nThe following PostCSS plugins can be enabled if you install their dependencies.\n\n### postcss-import\n\nInstall `postcss-import` and pass `shouldImport: true` to enable.\n\n### postcss-preset-env\n\nInstall `postcss-preset-env` and pass `shouldTimeTravel: true` to enable. You may also pass a\nconfig object to the plugin as `presetEnvConfig`.\n\nWith this one plugin, you should be ready to use Tailwind right away. Keep your\ncustomization to `tailwind.config.js` whenever possible, but you can use the\nfull power of Tailwind in your Vue components when\nnecessary.\n\n## Examples\n\n- [🍸 Aperitif \u0026mdash; A delectable starter template for your next Gridsome project.](https://github.com/brandonpittman/aperitif)\n- [Example project](http://github.com/brandonpittman/gridsome-plugin-tailwindcss-ffs)\n\nHappy coding!\n\n\u003ca href=\"https://www.buymeacoffee.com/blp\" target=\"_blank\"\u003e\u003cimg src=\"https://cdn.buymeacoffee.com/buttons/default-blue.png\" alt=\"Buy Me A Coffee\" style=\"height: 51px !important;width: 217px !important;\" \u003e\u003c/a\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbrandonpittman%2Fgridsome-plugin-tailwindcss","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbrandonpittman%2Fgridsome-plugin-tailwindcss","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbrandonpittman%2Fgridsome-plugin-tailwindcss/lists"}