tailwind.json 2.2 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455
  1. {
  2. "version": 1.1,
  3. "atDirectives": [
  4. {
  5. "name": "@tailwind",
  6. "description": "Use the `@tailwind` directive to insert Tailwind's `base`, `components`, `utilities` and `screens` styles into your CSS.",
  7. "references": [
  8. {
  9. "name": "Tailwind Documentation",
  10. "url": "https://tailwindcss.com/docs/functions-and-directives#tailwind"
  11. }
  12. ]
  13. },
  14. {
  15. "name": "@apply",
  16. "description": "Use the `@apply` directive to inline any existing utility classes into your own custom CSS. This is useful when you find a common utility pattern in your HTML that you’d like to extract to a new component.",
  17. "references": [
  18. {
  19. "name": "Tailwind Documentation",
  20. "url": "https://tailwindcss.com/docs/functions-and-directives#apply"
  21. }
  22. ]
  23. },
  24. {
  25. "name": "@responsive",
  26. "description": "You can generate responsive variants of your own classes by wrapping their definitions in the `@responsive` directive:\n```css\n@responsive {\n .alert {\n background-color: #E53E3E;\n }\n}\n```\n",
  27. "references": [
  28. {
  29. "name": "Tailwind Documentation",
  30. "url": "https://tailwindcss.com/docs/functions-and-directives#responsive"
  31. }
  32. ]
  33. },
  34. {
  35. "name": "@screen",
  36. "description": "The `@screen` directive allows you to create media queries that reference your breakpoints by **name** instead of duplicating their values in your own CSS:\n```css\n@screen sm {\n /* ... */\n}\n```\n…gets transformed into this:\n```css\n@media (min-width: 640px) {\n /* ... */\n}\n```\n",
  37. "references": [
  38. {
  39. "name": "Tailwind Documentation",
  40. "url": "https://tailwindcss.com/docs/functions-and-directives#screen"
  41. }
  42. ]
  43. },
  44. {
  45. "name": "@variants",
  46. "description": "Generate `hover`, `focus`, `active` and other **variants** of your own utilities by wrapping their definitions in the `@variants` directive:\n```css\n@variants hover, focus {\n .btn-brand {\n background-color: #3182CE;\n }\n}\n```\n",
  47. "references": [
  48. {
  49. "name": "Tailwind Documentation",
  50. "url": "https://tailwindcss.com/docs/functions-and-directives#variants"
  51. }
  52. ]
  53. }
  54. ]
  55. }