fix: add tailwindcss config
What does this MR do?
While reviewing !3764 (merged) I didn't check gl-relative and gl-absolute etc. classes used in <search-box> and <vimeo-player>
These changes introduce tailwindcss, autoprefixer, and postcss using @nuxtjs/tailwindcss to resolve issue where gl-relative and gl-absolute etc. class did not have associated CSS styles due to tailwindcss not being configured to generate from gitlab-ui defaults
Screenshots
| Before | After |
|---|---|
 |
 |
Steps to reproduce
- View page with
<vimeo-player>e.g. http://172.16.123.1:2018/brand-design/motion#iconography - Use
<search-box>, suggestions should be displayed in dropdown below<input>
Does this MR meet the acceptance criteria?
-
The MR title and commit messages meet the Pajamas commit conventions. -
The “What does this MR do?” section in the MR description is filled out, explaining the reasons for and scope of the proposed changes, per “Say why not just what”. - For example, if the MR is focused on usage guidelines, addressing accessibility challenges could be added in a separate MR.
-
Relevant label(s) are applied to the MR. -
The MR is added to a milestone. -
If creating a new component page from scratch, it follows the page template structure. -
Content follows the Pajamas voice and tone guidelines, falling back on the GitLab Documentation Style Guide when needed. -
Related pages are cross-linked, where helpful. Component pages have related components and patterns defined in their Markdown front matter. -
If embedding a Figma file, it follows the Figma embed guide. -
Review requested from any GitLab designer or directly from a maintainer or trainee maintainer.